Auth Basics 🔐

A full-stack authentication and shopping cart application built with modern web technologies. This project demonstrates secure user authentication (JWT, HTTP-only cookies) and state management in a distributed system.

🚀 Technlogy Stack

Frontend

• Framework: React 19 (via Vite)
• Language: TypeScript
• State Management: React Context API
• Styling: CSS Modules / Vanilla CSS
• HTTP Client: Native Fetch API

Backend

• Runtime: Node.js
• Framework: Express.js
• Language: TypeScript
• Authentication: JsonWebToken (JWT), Bcrypt for hashing
• Security: HTTP-Only Cookies, CORS protection

✨ Features

• User Authentication: Secure Login and Registration flows.
• Session Management: Persistent sessions using HTTP-only cookies.
• Protected Routes: Client-side routing protection for authenticated views.
• Shopping Cart: Add/Remove items (In-memory/File-based data persistence).
• Responsive Design: Clean and accessible UI.

🛠️ Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher recommended)
• npm (usually comes with Node.js)

📦 Installation

Clone the repository and install dependencies for both the frontend and backend.

# Clone the repository
git clone <repository-url>
cd auth-basics

# Install Backend Dependencies
cd backend
npm install

# Install Frontend Dependencies
cd ../frontend
npm install

🏃‍♂️ Running the Application

You will need to run the backend and frontend servers concurrently (in separate terminal windows).

1. Start the Backend Server

The backend runs on http://localhost:3000 (default).

cd backend
npm run dev

2. Start the Frontend Server

The frontend runs on http://localhost:5173 (default Vite port).

cd frontend
npm run dev

Open your browser and navigate to http://localhost:5173 to view the application.

📂 Project Structure

auth-basics/
├── backend/                # Node.js/Express Backend
│   ├── src/
│   │   ├── data/          # Data storage (mock/file-based)
│   │   ├── middleware/    # Auth & Error handling middleware
│   │   ├── routes/        # API Routes
│   │   └── index.ts       # Entry point
│   ├── package.json
│   └── tsconfig.json
│
├── frontend/               # React Frontend
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── context/       # AuthProvider & Global State
│   │   ├── pages/         # Page views (Login, Cart, etc.)
│   │   └── main.tsx       # Entry point
│   ├── package.json
│   └── vite.config.ts
│
└── README.md

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the ISC License.