DEV Community

Cover image for MERN (Full Stack Neon Starter kit with complete authentication) Submission for Neon Open Source Starter Kit Challenge
Spurgeon Gnan Prakasham Tara
Spurgeon Gnan Prakasham Tara

Posted on

MERN (Full Stack Neon Starter kit with complete authentication) Submission for Neon Open Source Starter Kit Challenge

This is a submission for the Neon Open Source Starter Kit Challenge : Ultimate Starter Kit

My Kit

This starter kit is perfect for building a TypeScript-supported MERN stack apps (MongoDB, Express, React, Node.js) using NeonDB as the database. This was my first time using NeonDB, and it was a great experience.

The kit includes complete frontend and backend code with a secure authentication system. It supports login with email and password or via OAuth (Google, Facebook, GitHub, LinkedIn), using JWT access and refresh tokens stored in HTTP-only cookies. It also provides features for user verification after signup, as well as password reset and recovery. OAuth authentication is implemented from scratch without third-party packages.

The frontend handles the full authentication flow with both protected and public routes, using React, Redux, React Query, and React Router DOM. The backend, powered by NeonDB (a fast and scalable PostgreSQL database), manages signup, login, OAuth flows, and password reset features, using packages like jsonwebtoken and bcryptjs.

If you're looking to build a TypeScript-supported MERN stack application, I'm confident that this starter kit will become your favorite tool.

Link to Kit

Here is the Link to Repository of this Kit

Your Journey

I chose this stack because it combines some of the most popular and efficient technologies available today, providing a solid foundation for building scalable and modern web applications. The MERN stack MongoDB, Express, React, and Node.js offers a seamless JavaScript development experience from frontend to backend, making it easier to maintain and extend the application. Additionally, using TypeScript adds type safety, which helps catch errors early and improves code quality.

For the database, I opted for NeonDB, a fast and scalable PostgreSQL-based solution. It offers the benefits of traditional relational databases, such as strong data consistency and support for complex queries, while also being optimized for performance and scalability, which is essential for modern applications.

Throughout the process, I learned how to effectively implement secure authentication systems, including OAuth, from scratch, without relying on third-party packages. This deepened my understanding of handling JWT access and refresh tokens securely using HTTP-only cookies. I also gained experience in managing user verification, password recovery, and building robust authentication flows that are both secure and user-friendly.

Using technologies like React Query and Redux for state management, I improved my skills in handling data fetching, caching, and managing application state effectively. Overall, this project provided valuable insights into building full-stack applications that are scalable, secure, and maintainable.

Thank You

Thanks to dev.to for introducing me to NeonDB. Iā€™m definitely planning to use it in my production apps whenever I need a relational database.

Top comments (0)