https://github.com/nshahaf/jwt-auth
JWT auth
https://github.com/nshahaf/jwt-auth
axios cloudinary express jwt jwt-authentication mongodb nodejs tailwind yup-validation zustand
Last synced: 3 months ago
JSON representation
JWT auth
- Host: GitHub
- URL: https://github.com/nshahaf/jwt-auth
- Owner: nshahaf
- Created: 2024-12-30T16:57:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-16T13:47:58.000Z (over 1 year ago)
- Last Synced: 2025-02-20T15:13:40.572Z (over 1 year ago)
- Topics: axios, cloudinary, express, jwt, jwt-authentication, mongodb, nodejs, tailwind, yup-validation, zustand
- Language: JavaScript
- Homepage:
- Size: 108 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JWT Auth Project
This is a project showcasing the use of JWT tokens for authentication. The project includes both a frontend and a backend, utilizing various technologies such as React, Tailwind CSS, bcrypt, JWT, and more.
## Features
- User authentication with JWT tokens
- User signup, login, and logout
- Profile picture upload using Cloudinary
- Protected routes
- Error handling
- State management with Zustand
- Formik and Yup for form validation
- Tailwind CSS for styling
- MongoDB for storing user data
## Technologies Used
- **Frontend:**
- React
- Tailwind CSS
- Axios
- React Router
- Zustand
- Formik
- Yup
- DaisyUI
- **Backend:**
- Node.js
- Express
- MongoDB
- Mongoose
- JWT (jsonwebtoken)
- bcrypt
- Cloudinary
- Chalk
- Cookie-parser
- CORS
- Dotenv
- Nodemon
## Screenshot:
## Backend Project Structure
```
backend/
├── logs
├── node_modules
├── src/
│ ├── api/
│ │ ├── auth/
│ │ │ ├── auth.controller.js
│ │ │ ├── auth.route.js
│ │ │ └── auth.service.js
│ ├── lib/
│ │ ├── cloudinary.js
│ │ ├── db.js
│ │ ├── jwt.js
│ ├── middleware/
│ │ ├── protectedRoute.js
│ │ ├── logger.js
│ ├── models/
│ │ ├── user.model.js
│ ├── tests/
│ ├── utils/
│ └── server.js
├── .env
├── package.json
```
## Frontend Project Structure
```
frontend/
├── node_modules/
├── public/
├── src/
│ ├── App.jsx
│ ├── assets/
│ ├── components/
│ ├── hooks/
│ ├── lib/
│ ├── pages/
│ │ ├── HomePage.jsx
│ │ ├── LoginPage.jsx
│ │ ├── SignupPage.jsx
│ │ ├── ProfilePage.jsx
│ │ ├── NotFoundPage.jsx
│ │ ├── ServerErrorPage.jsx
│ ├── store/
│ │ ├── authStore.js
│ ├── index.css
│ └── main.jsx
├── index.html
├── package.json
├── tailwind.config.js
├── eslint.config.js
├── postcss.config.js
└── vite.config.js
```
## Getting Started
### Prerequisites
- Node.js
- npm
- MongoDB
### Installation
```sh
# 1. Clone the repository:
git clone https://github.com/yourusername/ChatApp.git
cd ChatApp
# 2. Install dependencies:
cd backend
npm install
cd ../frontend
npm install
# 3. create .env file in the backend directory and add the following variables:
MONGODB_URI=your_mongodb_uri
JWT_SECRET=your_jwt_secret
PORT=3000
NODE_ENV=development
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
FRONTEND_URL=http://localhost:5173
# 4. Start the backend server:
cd backend
npm run dev
# 5. Start the frontend server:
cd frontend
npm run dev
```