📚 React Router Auth Project (Mini StudyNotion)

This project is a mini authentication app inspired by StudyNotion, built with React Router.
It demonstrates routing, protected routes, authentication flow, and component reusability in React.

🚀 Features

• 🔑 Authentication Flow
  • Signup (with account type selection: Student / Instructor)
  • Login with email & password
  • Logout functionality
• 🧭 Navigation with React Router v6
  • Pages: Home, Login, Signup, Dashboard
  • Protected Route for Dashboard (only accessible when logged in)
• 📌 Reusable Components
  • LoginForm & SignupForm with validation
  • Navbar with conditional rendering (login/signup vs logout/dashboard)
  • Template component to reuse layout across pages
• 🎨 UI Features
  • Show/Hide password toggle
  • Forgot password link placeholder
  • Google sign-in button (UI only)
  • Responsive design using Tailwind CSS
• 🔔 Notifications with react-hot-toast

🛠️ Tech Stack

• React 19 (Vite setup)
• React Router v6
• Tailwind CSS
• React Icons
• React Hot Toast

📂 Folder Structure

src/
┣ assets/
┃ ┣ logo.svg
┃ ┣ login.png
┃ ┣ signup.png
┃ ┗ frame.png
┣ components/
┃ ┣ Navbar.jsx
┃ ┣ LoginForm.jsx
┃ ┣ SignupForm.jsx
┃ ┣ Template.jsx
┃ ┗ PrivateRoute.jsx
┣ pages/
┃ ┣ Home.jsx
┃ ┣ Login.jsx
┃ ┣ Signup.jsx
┃ ┗ Dashboard.jsx
┣ App.jsx
┣ main.jsx
┗ index.css

🌐 Live Demo

👉 View Deployed Site

⚡ Getting Started

1. Clone the repository

   git clone https://github.com/ReetuGupta/Study-Notion-Auth.git
   cd Study-Notion-Auth

2. Install dependencies

   npm install

3. Run development server

   npm run dev

4. Open in browser:

   http://localhost:5173
   

🔮 Future Improvements

• Connect with real backend (Node.js / Express / MongoDB)
• Add JWT/session-based authentication
• Implement Forgot Password flow
• Form validation improvements
• Dark/light mode toggle

👨‍💻 Author

• Made with ❤️ by REETU GUPTA
• 🌐 Portfolio: My Portfolio
• 📩 Reach me: reetu.gupta703@gmail.com