I started this project in early December 2021. I did it as a challenge to myself - I've never before made my own application with both a frontend and backend under my own name. As well as a challenge it is a great playground to experiment with new exciting technologies I am interested in learning. This article is a great example of exactly that. I wanted to learn MDX and to integrate it in a React app. Through the power of MDX I can write markdown, as well as include JSX in the markdown. Check out the button below!
Isn't that super cool?
Project plan
This is supposed to be no average developer portfolio site. It is supposed to serve as a place for me to learn, share my learning process in public (through these articles) as well as being able to show off the work I do during my learning process on the site itself! Instead of listing a bunch of things I say I've done I can instead show it off with full transparancy and have interactive demos at the same time! If this were an average portfolio the techstack I've landed on would be waaaay overkill, but for my use-case it is perfect (hopefully - we'll see if it scales to all future use-cases 😄).
Github overview
The project is split into two parts:
- Zimmer (the frontend) - View the GitHub repo
- Keller (the backend) - View the GitHub repo
Technology overview
Here are the primary technologies used in this project (in no particular order):
- React: For the UI
- NextJS: Framework for the Client/Server/Routing
- Next Auth: Authentication for Next.js
- TypeScript: Typed JavaScript (necessary for any project you plan to maintain)
- Prisma: Fantastic ORM with stellar migrations and TypeScript client support
- Apollo Server: GraphQL server framework
- Apollo Client: Working with GraphQL APIs on the frontend
- GraphQL: 'Cause GraphQL APIs are cooler than REST APIs 😎
- Tailwind CSS: Utility classes for consistent/maintainable styling (w/ TailwindUI)
- Postcss: CSS processor (pretty much just use it for autoprefixer and tailwind)
- Nexus Declarative, Code-First GraphQL Schemas for TypeScript
- Postgres: Battle tested SQL database
- Formik: Build forms in React, without the tears
- Yup: Seamless form validation with Formik
- Lottie: Lightweight & scalable animations
Here are the services this site uses:
- Vercel: For the frontend deployment & hosting
- Digital Ocean: For the backend hosting, deployment as well as DB hosting
- Docker: Containerize the backend for easier deployment
Technologies I want to integrate in the future
- Cypress: E2E testing framework
- Jest: Unit/Component testing framework
- Testing Library: Simple utilities for testing DOM-based user interfaces
- MSW: Fantastic tool for mocking HTTP requests in the browser/node
- Framer Motion: Great React Animation library
- Redis: In-memory database–key/value store.
- React Query: For simplifying working with external REST APIs
- Turborepo: Easier TypeScript monorepos
Conclusion
I can't tell you how much I've learned from building this website. It's been a ton of fun and I'm excited to put my learnings into articles to teach you the specifics of how I did this stuff so you can do it too. The project is constantly changing, so it'll be exciting to look at this post in a couple of months.