Skip to content

README.md

Latest commit

 

History

History
112 lines (85 loc) · 3.19 KB

README.md

File metadata and controls

112 lines (85 loc) · 3.19 KB

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.