Study Hive Frontend

Study Hive is a modern learning resource platform that helps students discover, share, like, purchase, and manage study materials from one place. This repository contains the frontend web application built with React, TypeScript, and Vite.

The frontend connects to the Study Hive backend API for authentication, resource management, carts, leaderboards, user profiles, and payment-related flows.

Repository Links

• Backend repository: Study Hive Backend

Features

• User registration and login with JWT-based session handling
• Protected pages with automatic logout on forbidden API responses
• Home page with latest and suggested study resources
• Resource discovery by category and paginated listings
• Resource detail pages with creator information
• Add, edit, delete, like, and view resources
• Cart workflow for collecting study resources before checkout
• Bought and liked resource pages for each user
• User profile, edit profile, and public profile exploration
• Leaderboard with user ranking support
• Cloudinary-powered image upload support
• Maintenance mode screen controlled through environment configuration
• SPA deployment support for Netlify and Vercel rewrites

Tech Stack

• React 18
• TypeScript
• Vite
• React Router
• Axios
• Ant Design
• Cloudinary Upload API
• js-cookie
• jwt-decode / jsonwebtoken
• ESLint
• Husky

Project Structure

Study-Hive/
├── public/                  # Static assets and maintenance animation JSON
├── src/
│   ├── components/          # Reusable UI components
│   ├── config/              # Shared app configuration
│   ├── constants/           # UI constants
│   ├── interfaces/          # TypeScript data contracts
│   ├── middleware/          # Auth, validation, and upload helpers
│   ├── pages/               # Route-level pages
│   ├── App.tsx              # Application routes
│   └── main.tsx             # React entry point
├── .env.example             # Required environment variables
├── netlify.toml             # Netlify SPA redirect configuration
├── vercel.json              # Vercel SPA rewrite configuration
├── vite.config.ts           # Vite configuration
└── package.json             # Scripts and dependencies

Getting Started

Prerequisites

• Node.js 18 or newer
• npm or pnpm
• Running Study Hive backend API
• Cloudinary account and unsigned upload preset, if image uploads are required

Installation

npm install

or:

pnpm install

Environment Variables

Create a .env file in the repository root using .env.example as a reference.

VITE_BE_URL=http://localhost:8080
VITE_CLOUDINARY_CLOUD_NAME=your_cloud_name
VITE_CLOUDINARY_API_KEY=your_cloudinary_api_key
VITE_CLOUDINARY_API_SECRET=your_cloudinary_api_secret
VITE_CLOUDINARY_API_ENV_VAR=CLOUDINARY_URL=your_cloudinary_url
VITE_CLOUDINARY_UPLOAD_PRESET=your_unsigned_upload_preset
VITE_UNDER_MAINTAINANCE=FALSE

VITE_BE_URL should point to the backend base URL. For local development, the backend usually runs on http://localhost:8080.

Run Locally

npm run dev

The Vite development server will start and print the local application URL in the terminal.

Build for Production

npm run build

Preview Production Build

npm run preview

Lint

npm run lint

Fix Lint Issues

npm run lint:fix

Main Routes

Route	Description
/	Home page with latest and suggested resources
/signup	User registration
/login	User login
/about-us	About Study Hive
/cart	User cart
/categories/:category	Category-based resource view
/leaderboard	User leaderboard
/profile	Current user profile
/profile/edit	Edit current user profile
/profiles/explore	Browse user profiles
/profiles/explore/:userId	View another user's public profile
/resource/explore	Explore resources
/resource/:resourceId	Resource details
/resource/add	Add a new resource
/resource/bought	Bought resources
/resource/liked	Liked resources

Backend Integration

The frontend communicates with the backend using Axios and the VITE_BE_URL environment variable. Key backend areas used by the UI include:

• /auth/user/* for registration, login, and account access
• /resources/* for resource discovery, details, creation, updates, likes, and file access
• /user/* for profiles and profile updates
• /user/cart/* for cart management
• /leaderboard/* for ranking data
• /payment/* for checkout and payment flows

Deployment Notes

This application is configured as a single-page application. The included netlify.toml and vercel.json route all paths back to index.html, allowing browser refreshes and direct links to nested routes.

Before deployment, configure the production values for:

• VITE_BE_URL
• Cloudinary variables
• VITE_UNDER_MAINTAINANCE, if maintenance mode is needed

License

This project is licensed under the MIT License. See the LICENSE file for details.