I've always loved the idea of creating my own space on the internet. A digital garden where I can share what I enjoy, keep notes on different programming topics, and experiment with new tools.
Which Tech Stack?
When choosing the tech stack to use for my website, I made my decisions based on 4 things:
- Speed - Ship faster and avoid using tools which have steep learning curve.
- Experience - I wanted to use what I personally enjoy and have basic knowledge about the tool.
- Community Support - Does the framework have an active community? Are they adding any new features/optimizations?
- Learning Opportunities - What new skills can I learn along the way?
In the end, I settled for Nextjs, Tailwind, MDX, Prisma and TypeScript.
NextJS✨
Nextjs is a React Framework used to build Full-Stack applications for the modern web.
Why I enjoy using Nextjs?
- Documentation - One of the best docs I've come across, it contains all necessary information along with quizzes and detailed examples.
- It comes with in-built performance benefits such as code-splitting, Image optimization, Font optimization and flexible options for data fetching and API routes.
- Easy setup with Webpack, ESlint and TypeScript.
- It offers great Developer Experience(DX) - Hot Reload/Fast Refresh.
- Deploying to Vercel is seamless and super fast⚡
Tailwind
Tailwind is a utility-first CSS framework that allows us to style components using predefined class names.
Rapidly build modern websites without ever leaving your HTML.
I completely agree with the above statement made by Tailwind.
Tailwind was easy to pick up and it significantly improved my productivity. Some of the reasons why getting started with Tailwind was frictionless:
-
easy-to-navigate docs - Tailwind's documentation is comphrehensive, well-structured and beginner friendly.
-
VSCode Extension's
- Tailwind CSS IntelliSense provides auto-completion for classes and other things.
- Tailwind Docs(3rd party) to quickly navigate in the documentation.
- Headwind(3rd party) to order classes automatically on save.
-
clcx - Apply classes conditionally, similar to classnames but faster and smaller.
-
Guides on getting started with Tailwind in create-react-app or Next.js.
MDX
What is MDX?
MDX allows us to use JSX in your markdown content. We can import components, such as interactive charts or alerts, and embed them within your content.
The ability to import JSX components in markdown is great solution for creating a blog page. As of now, all my blogs are written in markdown.
Prisma
Prisma is an open-source next-generation ORM(Object-Relational Mapping) used to interact with a relational database like MySQL/Postgres.
The overall complexity of building backend is reduced drastically. I can easily define my database schema in a .schema file and use Prisma Client to run queries on the database.
Furthermore, we can also make use of Prisma Studio which provides a clean interface to the database in the browser.
TypeScript
TypeScript is a statically typed superset of JavaScript, it essentially helps to validate the code in the browser before it runs.
Using TypeScript has saved me so many times from countless hours of debugging. Furthermore I don't have to look at the documentation as much because I can tell the requirements of any function/component right in the editor. All thanks to TypeScript.
console.log("TypeScript is Cool!");Vercel
Vercel is a platform for deployment and collaboration between developers.
It integrates seamlessly with GitHub, after every git push to your repository, Vercel will build the application and deploy it to the web. Further a link will be generated which can be shared with other collaborators for feedback.
Design
As a person who prioritizes simplicity in design, I tend to lean towards websites that focus on content over flashy aesthetics. However, I believe that design should never be dull or uninspired. Instead, it should reflect and communicate the unique identity of a company or individual.
So I started with basic wireframe in Figma. Looked at some references, YouTube videos and many other resources.
Few points which I considered when designing this website:
- Time, Time, Time! I wanted to keep the design simple yet elegant knowing that I would not get enough time to implement all the components.
- Dark Theme - The reader should not strain their eyes👀
To add a touch of excitement and appeal to my website, I included animated highlights on the homepage. This animated feature brings attention to specific keywords, adding an element of delight for visitors to the site.
The Future
I want this to be a space that evolves with me and provides support to others on their own journeys. I'm happy with where I'm starting, and I'm eager to see where this journey takes us.
If you have any questions, feedback or suggestions for this site, please feel free to reach out to me on Twitter or Contact form.