NextJS User CRUD
Type
Web Development
Date Published
Shortly after I started learning NextJS, I knew that the technology would be perfect for web apps. Being fast, modern and great for complex interactions, I started to think of ideas I could build with it.
Most of these ideas involved a user CRUD aspect. A user would need to be able to login to an account area, save data about themselves and be able to log out or delete their data.
I found there weren't really any pre-built solutions that existed so that lead me to create this project. I built it with a boilerplate-type of use case in mind, so the final visuals and aesthetics aren't as polished as I would normally make them. It is just intended to establish most of the backend functionality, so that it can be copied for future projects and styled according to the individual project.
A user is able to:
- Sign up
- Login
- Save information about themselves (text and date inputs, and an image upload for their profile picture)
- Delete their account
- Log out
- See other user profiles (restricted access if they don't have administrator privileges)
This project was an important first-step to allow bigger projects to be created. Using this as a base for a user CRUD system means it's quicker for me to setup and start working on new web apps which require user logins.
I used NextAuth.js which handled a lot of the user login and session persistence needed for this project. User data is stored in MongoDB and passwords are hashed for protection. User-uploaded profile images are stored in Imagekit which offers free hosting for files and a React API.
Project Gallery
Technology Used
NextJS
A React-based web framework that enables server-side rendering and static site generation. Perfect for building fast, production-ready web applications.
React
A JavaScript library for building interactive user interfaces through reusable components. The go-to choice for modern frontend development.
Javascript
The programming language of the web, enabling interactive functionality on websites. Essential for modern web development.
Node JS
A JavaScript runtime for server-side development. Popular for creating RESTful APIs and real-time applications.
Github
A web-based platform for version control and collaboration using Git. The industry standard for code collaboration.
Sass
A CSS preprocessor that extends CSS with variables, nesting, and mixins. Helps write more maintainable stylesheets.
Npm
The default package manager for Node.js with millions of JavaScript packages. Essential for modern JavaScript development workflows.
Tailwind
A utility-first CSS framework for rapid UI development. Highly customizable and optimized for production.
Mongodb
A NoSQL document database that stores data in flexible, JSON-like documents. Popular choice for modern web applications.
Vercel
A cloud platform for static sites and serverless functions. Provides instant deployments and global CDN.
Building a backend user CRUD here, means it will be much quicker for me to build bigger and more polished web apps in the future.