Hi, I'm Sophia Brandt
About
I’m a passionate learner:
- coding (Javascript, Clojure, Elixir, Python, functional programming, web dev)
- tech (Linux, Raspberry Pi)
- communication and mediation
- languages
- writing
Author of Miso RPG, a minimalist framework for solo pen & paper role-playing games.
Fluent in German and English. Currently re-learning French. J’adore la langue française.
Blog
I’m writing a coding blog on www.rockyourcode.com.
Projects
Feedbacky
feedbacky
Node.js, Express.js and React.js app that allows you to send out emails to collect feedback
You can see the LIVE DEMO here.
Source Code
The source code is available at Github.
Tech Stack
Built with
- Node.js with Express layer
- React.js & React Redux
- Redux Form
- Ramda.js
- MongoDB with MongoDB Atlas
- authentication with Google Auth 2.0
- Materialize CSS
- Stripe
- SendGrid
- Heroku
Features
This is a toy app that allows you to make fake payments with Stripe and send out simple email surveys with SendGrid.
The app was coded with the help of Stephen Grider’s Udemy course Node with React: FullStack Web Development.
Differences/enhancements over the course:
- uses Passport-Next fork and Passport-Next Google OAuth 2.0 Strategy instead of the stale upstream repositories (and deprecated G+ auth)
- additional error handling with try/catch for Redux actions
- conditional rendering on the homepage depending on authentication
- protected routes if user is not authenticated
- credits validation (checks if user has credits in their account before showing a new survey form)
- 404 page and client-side “catch-all” routing
- ability to delete surveys
- Metro UI color scheme
- uses Ramda.js instead of Lodash.js
How to Use
Navigate to https://feed-backy.herokuapp.com/ and log in with your Google Account.
You can add credits via Stripe with fake credentials. Click on the blue “ADD CREDITS” button and fill in the pop-up window. Insert a dummy email. The card number is:
4242 4242 4242 4242
Month/Year and CVS: add dummy numbers. Then “pay” \$5.
On the main page of the app, click on “Collect now” and create a fake survey.
The survey will be send via SendGrid and users can click on “yes” or “no”. You can see these in your dashboard.
Functional Movie Search
Functional Movie Search
a frontend example app built with functional principles in mind - without a framework like React & Redux.
The LIVE DEMO is hosted on Github Pages. You can search for movie titles by typing into the search bar and submitting your search.
The app will query the Open Movie Database.
Click on an image to see more information (leads to the IMDB Website).
If no image is available, you’ll see a cute kitten.
Source Code
The source code is available at Github.
Tech Stack
- ES2015+
- virtual-dom
- hyperscript-helpers
- Ramda
- minireset.css
- Tachyons
- Open Movie Database
- PlaceKitten
- Github Corners
- Webpack & webpack-dev-server
Face Recognition Brain
Face Recognition Brain
a Face Recognition app
Usage
Go to the LIVE DEMO and register a new user.
Sign in with your new credentials.
In the search bar enter the URL of an image with a face and click “Detect”. The app will recognize the face and paint a blue box around it (currently only recognizes one face).
The app will show a running number of your submission entries.
Motivation
The source code is available at Github: Frontend and Backend.
Tech/Frameworks Used
Built with
Markdown Preview
Markdown Preview
with Reagent, Shadow-cljs and Clojurescript
Go to the LIVE DEMO.
How to use
Just type text in markdown format into the textfield. The preview updates automatically.
Motivation
The source code is available at Github.
Tech/Frameworks Used
Built with
- Clojurescript
- Reagent (React Wrapper for Clojurescript)
- shadow-cljs (Clojurescript Compiler)
- react-markdown
- Tachyons
Further Reading
I wrote a blog post about this project where I explain the code.
URL Shortener React
URL Shortener React
a URL Shortener written in React that uses the Rebrandly API
You can shorten an URL by typing into an input field. Check out the LIVE DEMO.
Source Code
The source code is available at Github.
Tech/framework used
Built with
The app uses Typechecking with PropTypes and the State React Hook.
Breaking Bad Quotes
Breaking Bad Quotes
With Clojurescript + Reagent
A simple web app that displays random quotes from the TV-series “Breaking Bad”. You can ask for new quotes or tweet the current quote.
You can see the LIVE DEMO here.
Source Code
The source code is available at Github.
Tech/Frameworks Used
Built with
- Clojurescript
- Reagent (React Wrapper for Clojurescript)
- shadow-cljs (Clojurescript Compiler)
- Breaking Bad Quotes API
- Wing CSS
- Foundation Icons
Tutorials
I wrote about how to build this app on my blog in two posts:
- Tutorial: Clojurescript App With Reagent For Beginners, Part 1 (local development of the app)
- Tutorial: Clojurescript App With Reagent For Beginners, Part 2 (deployment to Firebase)