URA Cons App

A full-stack application built with TypeScript, featuring a React frontend with Tailwind CSS and shadcn/ui components, and a Node.js Express backend.

Project Structure

/
├── frontend/          # React + TypeScript frontend
│   ├── src/
│   ├── public/
│   └── package.json
├── backend/           # Node.js + Express backend
│   ├── src/
│   ├── dist/
│   └── package.json
└── package.json       # Root package.json with scripts

Tech Stack

Frontend

• React 19 with TypeScript
• Vite for build tooling
• Tailwind CSS for styling
• shadcn/ui for UI components
• Lucide React for icons

Backend

• Python with Flask
• Flask web framework
• PostgreSQL database
• Redis for caching and sessions
• Flask-CORS for cross-origin requests

DevContainer & Infrastructure

• Docker containerization
• Docker Compose for multi-service development
• DevContainer for consistent development environments
• Adminer for database management
• VS Code extensions and settings pre-configured

Getting Started

Option 1: DevContainer (Recommended for Teams)

The easiest way to get started is using the DevContainer configuration which provides a consistent development environment across all team members.

Prerequisites

• Docker Desktop
• Visual Studio Code with the Remote-Containers extension

Setup

1. Clone the repository
2. Open in VS Code
3. Click "Reopen in Container" when prompted (or use Command Palette: "Remote-Containers: Reopen in Container")
4. Wait for the container to build and initialize

The DevContainer will automatically:

• Set up Node.js 20 environment
• Install all dependencies
• Start PostgreSQL and Redis databases
• Configure VS Code extensions and settings
• Forward all necessary ports

Available Services

• Frontend: http://localhost:5173 (Vite dev server)
• Backend API: http://localhost:3001
• PostgreSQL: localhost:5432
• Redis: localhost:6379
• Adminer (DB Admin): http://localhost:8080

Option 2: Local Development

Prerequisites

• Node.js (v18 or higher) for frontend
• Python 3.11+ for backend
• npm or yarn
• PostgreSQL (optional if using Docker for DB only)

Installation

1. Install frontend dependencies:

   cd frontend && npm install

2. Install backend dependencies:

   cd backend && pip install -r requirements.txt

3. Start databases (if not using DevContainer):

   docker-compose up postgres redis -d

Development

Frontend:

cd frontend && npm run dev

Backend:

cd backend && python main.py

This will start:

• Frontend on http://localhost:5173
• Backend on http://localhost:5000

Building for Production

Build frontend:

cd frontend && npm run build

API Endpoints

• GET / - Health check
• GET /api/health - API health status

VS Code Development

This project includes comprehensive VS Code configuration for streamlined development.

Extensions

Install recommended extensions when prompted, or manually:

• Python support (ms-python.python)
• Black formatter (ms-python.black-formatter)
• TypeScript support
• Tailwind CSS IntelliSense
• Prettier

Debug & Launch

Use F5 or the Debug panel to:

• Python Backend - Debug the Flask backend
• Frontend Dev Server - Launch frontend with debugging
• Full Stack (Compound) - Launch both frontend and backend simultaneously

Tasks

Use Ctrl+Shift+P → "Tasks: Run Task":

Installation Tasks:

• Install Backend Dependencies - pip install -r requirements.txt
• Install Frontend Dependencies - npm install in frontend
• Install All Dependencies - Runs both installations in parallel

Development Tasks:

• Start Backend - Run Python Flask server
• Start Frontend - Run frontend dev server
• Build Frontend - Build frontend for production

Docker Tasks:

• Docker Compose Up - Start all services (DB, Redis, etc.)
• Docker Compose Down - Stop all services

Quick Start with VS Code:

1. Open project in VS Code
2. Install recommended extensions when prompted
3. Run task: Install All Dependencies
4. Run task: Docker Compose Up (for databases)
5. Press F5 and select Full Stack to launch both frontend and backend

Development Tools

Frontend

• TypeScript for type safety
• ESLint for code linting
• Prettier for code formatting
• Vite HMR for hot module replacement

Backend

• Python with Flask
• Black formatter for code formatting
• Type hints support