Next Python Full-Stack Application

A modern full-stack application built with Next.js frontend and Python FastAPI backend, featuring JWT authentication, user management, and a comprehensive dashboard.

Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Type-safe JavaScript
• Lucide React - Beautiful icons
• Axios - HTTP client for API requests
• js-cookie - Cookie management

Backend

• Python FastAPI - Modern, fast web framework
• SQLAlchemy - Python SQL toolkit and ORM
• JWT Authentication - Secure token-based authentication
• Pydantic - Data validation using Python type annotations
• Uvicorn - ASGI server implementation
• UV - Python package management

Database

• SQLite - Development database
• MySQL - Production database (configurable)

Features

✅ Landing Page - Accessible without login ✅ User Authentication - JWT-based login/register system ✅ User Management - Complete user database with profiles ✅ Protected Dashboard - Authenticated user panel ✅ Sidebar Navigation - Clean navigation interface ✅ App Collection - Dashboard with various application modules ✅ Statistics Dashboard - Real-time stats and analytics ✅ Responsive Design - Mobile-friendly interface

Project Structure

next-python/
├── backend/
│   ├── app/
│   │   ├── routers/
│   │   │   ├── auth.py          # Authentication endpoints
│   │   │   ├── users.py         # User management
│   │   │   └── dashboard.py     # Dashboard data
│   │   ├── main.py             # FastAPI application
│   │   ├── database.py         # Database models
│   │   ├── schemas.py          # Pydantic schemas
│   │   └── auth.py             # Authentication utilities
│   ├── pyproject.toml          # Python dependencies (uv)
│   ├── .env                    # Environment variables
│   └── run.py                  # Development server
├── frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── login/          # Login page
│   │   │   ├── register/       # Registration page
│   │   │   ├── dashboard/      # Dashboard page
│   │   │   ├── layout.tsx      # Root layout
│   │   │   ├── page.tsx        # Landing page
│   │   │   └── globals.css     # Global styles
│   │   ├── components/
│   │   │   ├── Sidebar.tsx     # Navigation sidebar
│   │   │   ├── AppGrid.tsx     # App cards grid
│   │   │   └── StatsGrid.tsx   # Statistics display
│   │   └── contexts/
│   │       └── AuthContext.tsx # Authentication context
│   ├── package.json            # Node.js dependencies
│   ├── tailwind.config.js      # Tailwind configuration
│   └── next.config.js          # Next.js configuration
└── README.md

Quick Start

Prerequisites

• Python 3.8+
• Node.js 18+
• UV (Python package manager)

Backend Setup

1. Navigate to backend directory:

   cd backend

2. Install dependencies with UV:

   uv venv
   source .venv/bin/activate  # On Windows: .venv\Scripts\activate
   uv sync

3. Set up environment variables:

   cp .env.example .env
   # Edit .env with your configuration

4. Create database:

   python create_database.py

5. Start the backend server:

   python run.py
   # or
   uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

The backend will be available at http://localhost:8000

Frontend Setup

1. Navigate to frontend directory:

   cd frontend

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables:

   cp .env.local.example .env.local
   # Edit .env.local with your API URL

4. Start the development server:

   npm run dev
   # or
   yarn dev

The frontend will be available at http://localhost:3000

API Endpoints

Authentication

• POST /auth/register - Register new user
• POST /auth/login - User login
• GET /auth/me - Get current user info

Users

• GET /users/ - Get all users (authenticated)
• GET /users/{user_id} - Get specific user (authenticated)

Dashboard

• GET /dashboard/apps - Get dashboard applications
• GET /dashboard/stats - Get dashboard statistics

Environment Variables

Backend (.env)

SECRET_KEY=your-secret-key-here
ALGORITHM=HS256
ACCESS_TOKEN_EXPIRE_MINUTES=30
DATABASE_URL=sqlite:///./test.db
CORS_ORIGINS=["http://localhost:3000"]

Frontend (.env.local)

NEXT_PUBLIC_API_URL=http://localhost:8000

Database Setup

Development (SQLite)

The application uses SQLite by default for development. The database will be created automatically when you run the application.

Production (MySQL)

For production, update your .env file:

DATABASE_URL=mysql://username:password@localhost/dbname

Then run the database creation script:

python create_database.py

Future Plans

• Pricing page with three tiers
• Stripe payment integration
• Additional dashboard modules
• Email notifications
• Advanced analytics
• User roles and permissions

Development

Adding New Features

1. Backend: Add new routers in app/routers/
2. Frontend: Create new pages in src/app/
3. Components: Add reusable components in src/components/

Testing

# Backend
cd backend
pytest

# Frontend
cd frontend
npm test

Deployment

Backend Deployment

1. Set up production environment variables
2. Configure MySQL database
3. Deploy using Docker, Railway, or similar platform

Frontend Deployment

1. Build the application: npm run build
2. Deploy to Vercel, Netlify, or similar platform

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License.