MahmudJewel/nextjs-fastapi-user-management

User management using Nextjs and FastAPI

Full-Stack app with user management

If the repo is helpful, please give a star and fork it.

Click here to download/fork the repository

Features:

• Login and logout using cookies and session
• Create user account
• User can update his information

Tech Stack

Front-end

• React
• Nextjs-app router
• React-Bootstrap

Back-end

• FastAPI
• SQLAlchemy as ORM
• Pydantic as data validation

Features of Front-end

• middleware
  • Authorized user can access '/me' routes. but can't access '/login', '/signup'.
  • Unauthorized user can access '/login', '/signup' but can’t access ‘/me’.
• Signup
  • if user exists, will show the error messages
  • custom validated text for required fields like email, password
  • If user is created, will redirect to the login page and show the alert message.
• Login
• Logout
• User details page
• custom form validation on login and signup
• User can update information.
• Active navbar

Features of Back-end

• user module
  • id, first name, last name, email as username, password, role, is_active created_at, updated_at
• admin dashboard => sqladmin
• authentication => JWT
• db migration => alembic
• middleware

User module's API

SRL	METHOD	ROUTE	FUNCTIONALITY	Fields
1	POST	/login	Login user	email, password
2	POST	/users/	Create new user	email, password, first name, last name
3	GET	/users/	Get all users list	email, password, first name, last name, role, is_active, created_at, updated_at, id
4	GET	/users/me/	Get current user details	email, password, first name, last name, role, is_active, created_at, updated_at, id
5	GET	/users/{user_id}	Get indivisual users details	email, password, first name, last name, role, is_active, created_at, updated_at, id
6	PATCH	/users/{user_id}	Update the user partially	email, password, is_active, role
7	DELETE	/users/{user_id}	Delete the user	None
8	GET	/	Home page	None
9	GET	/admin	Admin Dashboard	None

Setup

Back-end

The first thing to do is to clone the repository:

$ https://github.com/MahmudJewel/nextjs-fastapi-user-management

Create a virtual environment to install dependencies in and activate it:

$ cd nextjs-fastapi-user-management
$ cd backend
$ python -m venv venv
$ source venv/bin/activate

Then install the dependencies:

# for fixed version
(venv)$ pip install -r requirements.txt

# or for updated version
(venv)$ pip install -r dev.txt

Note the (venv) in front of the prompt. This indicates that this terminal session operates in a virtual environment set up by virtualenv2.

Once pip has finished downloading the dependencies:

(venv)$ alembic upgrade head  # database migration
(venv)$ uvicorn app.main:app --reload # backend server will be => http://127.0.0.1:8000/

Front-end

Go to the front-end directory and install dependencies

$ cd frontend
$ pnpm install or npm install

create a file called .env.local on the root directory(same as public directory) and set environment valiables

# .env.local
$ NEXT_PUBLIC_API_HOST = 'http://127.0.0.1:8000/'

Run the frontend

$ pnpm run dev # make sure to run the back-end first on http://127.0.0.1:8000/

Congrates!!! you are done...

Screenshot

Alert for required fields

Alert for user created.

Alert for user exists

Alert for password

Happy Coding