Studiverse

A modern learning platform built with React + TypeScript + Node.js + Express.

Features

• 🎨 Minimalist dark mode UI with purple/pink/cyan gradients
• 📚 Course library and management
• 📅 Calendar for study sessions
• 👥 Social features (Study Groups & Hackathons)
• 👤 User profile and progress tracking
• 🔒 Protected routing with localStorage authentication
• 🚀 Node.js/Express backend API

Tech Stack

Frontend

• React 18
• TypeScript
• Vite
• TailwindCSS
• React Router
• Lucide Icons

Backend

• Node.js
• Express
• CORS enabled
• RESTful API

Getting Started

Installation

npm install

Development

Option 1: Run both frontend and backend together

npm run dev:all

Option 2: Run separately

Terminal 1 - Backend Server:

npm run dev:server

Server runs on http://localhost:3001

Terminal 2 - Frontend:

npm run dev

Frontend runs on http://localhost:5173

Build

npm run build

Project Structure

├── server/
│   └── index.js          # Express backend server
├── src/
│   ├── components/       # Reusable components (Navbar, ProtectedRoute)
│   ├── pages/            # Page components (Login, Dashboard, Calendar, etc.)
│   ├── data/             # JSON data files (used by backend)
│   ├── utils/
│   │   └── api.ts        # API utility functions
│   ├── App.tsx           # Main app component with routing
│   └── main.tsx          # Entry point
└── package.json

API Endpoints

Health

• GET /api/health - Server health check

Books/Library

• GET /api/books - Get all books
• POST /api/books - Create a new book

Events/Calendar

• GET /api/events - Get all events
• POST /api/events - Create a new event
• DELETE /api/events/:id - Delete an event

Study Groups

• GET /api/groups - Get all groups
• POST /api/groups - Create a new group

Users

• GET /api/users - Get all users
• GET /api/users/:id - Get user by ID
• POST /api/users - Create a new user

Authentication

• POST /api/auth/login - Login (returns mock token)
• POST /api/auth/logout - Logout

Pages

• Login: Simple authentication with localStorage
• Dashboard: Overview with stats and quick access cards
• Calendar: Study sessions and events
• Library: Browse and manage courses
• Social: Study groups and hackathon matchmaking
• Profile: User profile and course progress

Notes

• Backend API is available at http://localhost:3001/api
• Vite proxy is configured to forward /api requests to the backend
• Authentication is handled via localStorage (fake login for MVP)
• Data is stored in JSON files in src/data/
• Dark theme with gradient accents throughout