Skip to content

React (Vite) application that allows users to register, login, view, and edit their account information — built with React 18+, Bootstrap 5, and React Router v6.

Notifications You must be signed in to change notification settings

MeetVora79/ReactAuthApp

Repository files navigation

🚀 ReactAuthApp

A simple React (Vite) application that allows users to register, login, view, and edit their account information — built with React 18+, Bootstrap 5, and React Router v6.

This project demonstrates basic authentication logic using React Context (no backend required) — perfect for understanding how front-end auth systems work.


🌟 Features

User Registration – Create a new account with name, email, and password.
Login Page – Secure login validation with error handling.
Dashboard Page – Display a stylish welcome screen after login.
Profile Page – View and edit user information (name & email).
Logout Functionality – Instantly clears the session.
Protected Routes – Only logged-in users can access dashboard and profile.
Bootstrap 5 UI – Clean, responsive, and professional styling.
Context-based Auth System – Manage users without external backend.


🛠️ Tech Stack

Technology Purpose
⚛️ React 18+ Frontend framework
⚡ Vite Fast development environment
🧭 React Router v6 Page navigation
🪄 Bootstrap 5 Styling and layout
💾 Local Storage Save user session & data
🔐 React Context API Handle authentication globally

⚙️ Installation & Setup

1️⃣ Clone the Repository

git clone https://github.com/your-username/ReactAuthApp.git
cd ReactAuthApp

2️⃣ Install Dependencies
npm install

3️⃣ Run the App
npm run dev

Then open: http://localhost:5173 in your browser.

---

🧱 Pages Overview

🔑 Login Page
Validates email & password.
Redirects to Dashboard on success.
“Don’t have an account? Register” link.

📝 Register Page
Collects name, email, and password with confirmation.
Redirects to Dashboard after registration.
“Already have an account? Login” link.

🏠 Dashboard Page
Displays a personalized welcome banner.
Includes cards linking to Profile and future features (Activity, Settings).

👤 Profile Page
Displays user details in read-only mode.
Back button (top-left) and Edit button (top-right).
Edit mode allows name/email updates with Save and Cancel options.
Logout button when not editing.

👨‍💻 Author
Meet Vora
📧 [meetvora877@gmail.com]
🐙 https://github.com/MeetVora79

About

React (Vite) application that allows users to register, login, view, and edit their account information — built with React 18+, Bootstrap 5, and React Router v6.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published