AccessHub

AccessHub is a React and TypeScript authentication frontend connected to a deployed FastAPI backend.

Live Demo

Frontend:

• AccessHub

Backend API:

• Secure User API Swagger Docs

Related backend repository:

• Secure User API

Current Status

Area	Status
React / TypeScript frontend	✅ Complete
Login flow	✅ Working
JWT token storage	✅ Working
Protected dashboard	✅ Working
Admin-only user list	✅ Working
Role-based UI behaviour	✅ Working
Loading and error states	✅ Complete
Vercel deployment	✅ Live
Render backend integration	✅ Live
Frontend CI	✅ Passing
Docker CI	✅ Passing

Features

• User login flow
• JWT token storage
• Protected dashboard route
• Admin-only user list
• Role-based access behaviour
• Authenticated API requests
• API integration with deployed FastAPI backend
• Multi-page frontend routing
• Loading and error handling
• Responsive UI styling
• Vercel deployment
• Frontend and Docker CI workflows

Screenshots

Login Page

Protected Dashboard

Admin Panel

Tech Stack

Area	Technologies
Frontend	React, TypeScript, Vite, React Router, CSS
Backend API	FastAPI, PostgreSQL, SQLAlchemy, JWT authentication
Deployment	Vercel, Render
DevOps / Tooling	Docker, GitHub Actions, Git, GitHub

Quick Start

Clone the repository:

git clone https://github.com/Iris408/accesshub
cd accesshub

Install dependencies:

npm install

Create a .env file:

VITE_API_URL=https://mini-user-api.onrender.com

Run locally:

npm run dev

Build check:

npm run build

Documentation

More detailed project documentation is available in the docs/ folder.

Document	Description
Setup Guide	Local setup, environment variables, build commands, and demo notes
Auth Flow	JWT login, token storage, protected routes, and admin-only access
Frontend Notes	Pages, UI behaviour, routing, loading states, and frontend improvements
Project Details	Architecture, related backend, limitations, future improvements, and learning notes
CI Notes	Frontend CI and Docker CI workflow notes

Project Summary

AccessHub is a React and TypeScript authentication frontend demonstrating a complete JWT-based authentication and authorisation flow. It integrates with Secure User API to provide protected routing, role-based access, admin-only functionality, authenticated API requests, and production-style deployment using Vercel, Render, Docker, and GitHub Actions CI.

Author

Built by Iris408