TBW

💻 PROJECT NAME ✨ => 💻 React + Node.js Authentication App

🔗 Profile Links✨

Resume	Github	Linkedin	Portfolio	Blogger	Medium

💫Tech-Stack->

• For Frontend:-

  • HTML5
  • CSS3  - JavaScript 
  • ReactJS
  • Redux

    • For Backend:-

  • NodeJS
  • ExpressJS - MongoDB 

• For deploy database:-

  • Vercel  

• For Styling:-

   - Chakra UI 

• For live Project: -

   - Vercel

⭕Steps to run our project:

✨Clone the repository.

✨Run the command npm install in both the frontend and backend folders.

✨Run the command npm run server in the backend folder.

✨Run the command npm start in the frontend folder on localhost:3000.

---

Features ✨:-

---

Serial No	Feature
1	User Signup and login, navbar , footer
2	Home Page Design, responsive design

---

Package.json(Dependency)✨:-

Serial No	Backend	Frontend
1	nodemon	Chakra-ui
2	mongoose	React Router dom
3	cors	redux , react-icons
4	dotenv	react-redux , react-thunk
5	express	react-hot-toast

⭕Steps to use our project:

This project demonstrates a simple authentication system using JWT tokens with a Node.js backend and a React.js frontend.

---✨Getting Started: ✨Initializing the Application: To start using the application, go to the frontend terminal and run the command npm start. This will launch the application locally, allowing access through your web browser at port 3000.

✨Home Page: When the application is launched, users will see the home page, which provides essential options for interaction such as signup and login.

---✨User Journey:

💫Signup: Upon launching the application, users are greeted with the home page, offering essential options for interaction like signup and login.

💫Login: Users are given the choice to log in. This initial step ensures a personalized experience within the application.

---

Getting Started

Prerequisites

- Node.js and npm installed
- MongoDB installed (for local development)

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/react-node-auth.git
   cd react-node-auth
   

Install dependencies for both backend and frontend:

cd backend
npm install
cd ../frontend
npm install

Run the development servers:

 Backend:
cd backend
npm run dev

Frontend:
  cd frontend
  npm start
  
Open your browser and visit http://localhost:3000 to see the app in action.

Form Validation

  Explain the rules and requirements for form validation in your application.

Error Messages

Provide a list of possible form validation errors and their corresponding error messages.

Invalid Email Format:

 Message: "Please enter a valid email address."

Invalid Password:

 Message: "Password must be at least 8 characters long and include at least one lowercase letter, one uppercase letter, and one digit."

Invalid Phone Format:

Message: "Please enter a valid 10-digit phone number."

User Already Exists:

Message: "An account with this email address already exists. Please use a different email."

Server Error:

Message: "Something went wrong on our end. Please try again later."

Backend (Node.js)

    The backend is a Node.js server using Express, MongoDB for data storage, bcrypt for password hashing, and JSON Web Tokens (JWT) for authentication.

Endpoints:

   /signup: User signup with validation.
  /login: User login with JWT token generation.

Frontend (React.js)

The frontend is a React.js application with simple components for signup and login.

Components:

       Signup.js: User signup form.
     Login.js: User login form.

Hosting on Vercel

 Build the React app:
 cd frontend
npm run build
Install Vercel CLI:
npm install -g vercel

Deploy to Vercel:

 cd frontend
vercel

Follow the prompts to deploy your application.

Contributing

 💻 Contributions are welcome! Please follow the standard guidelines for contributing.

Flow

graph TD;
 App-->HomePage
HomePage-->SignupPage
SignupPage--> LoginPage

Loading

---

✨Thank You✨