{"id":26104667,"url":"https://github.com/cynthiawahome/fastapi-react-integration","last_synced_at":"2026-04-09T22:36:40.918Z","repository":{"id":281489551,"uuid":"945426352","full_name":"CynthiaWahome/fastapi-react-integration","owner":"CynthiaWahome","description":"This repository demonstrates the integration of a FastAPI backend with a React frontend, featuring JWT-based authentication. It includes user registration, login, and profile management functionalities. The project is structured with clear separation of concerns and follows best practices for security and configuration management.","archived":false,"fork":false,"pushed_at":"2025-03-09T12:30:55.000Z","size":117,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-09T13:29:28.700Z","etag":null,"topics":["authentication","axios","fastapi","fullstack","jwt","pydantic","python","react","sqlalchemy","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CynthiaWahome.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-09T11:53:48.000Z","updated_at":"2025-03-09T12:31:00.000Z","dependencies_parsed_at":"2025-03-09T13:29:31.601Z","dependency_job_id":"afdb335f-ee2b-4fe4-946b-5c84deac1bb6","html_url":"https://github.com/CynthiaWahome/fastapi-react-integration","commit_stats":null,"previous_names":["cynthiawahome/fastapi-react-integration"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CynthiaWahome%2Ffastapi-react-integration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CynthiaWahome%2Ffastapi-react-integration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CynthiaWahome%2Ffastapi-react-integration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CynthiaWahome%2Ffastapi-react-integration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CynthiaWahome","download_url":"https://codeload.github.com/CynthiaWahome/fastapi-react-integration/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242750784,"owners_count":20179258,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","axios","fastapi","fullstack","jwt","pydantic","python","react","sqlalchemy","vite"],"created_at":"2025-03-09T21:01:54.322Z","updated_at":"2026-04-09T22:36:40.906Z","avatar_url":"https://github.com/CynthiaWahome.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# FastAPI and React Integration\n\nThis project demonstrates integration between a FastAPI backend and React frontend with JWT authentication. It features user registration, login, and profile management functionality.\n\n## Project Structure\n\n```\nfastapi-react-integration/\n├── backend/\n│   ├── auth/\n│   │   └── auth_handler.py  # JWT authentication logic\n│   ├── routers/\n│   │   ├── auth.py          # Authentication routes\n│   │   └── user.py          # User profile routes\n│   ├── database.py          # Database connection\n│   ├── models.py            # SQLAlchemy models\n│   └── schemas.py           # Pydantic schemas\n├── frontend/\n│   ├── src/\n│   │   ├── components/      # React components\n│   │   │   ├── Login.jsx\n│   │   │   ├── Register.jsx\n│   │   │   └── UserProfile.jsx\n│   │   ├── contexts/\n│   │   │   └── AuthContext.jsx  # Authentication state management\n│   │   ├── api.js           # API integration functions\n│   │   └── App.jsx          # Main application component\n│   └── package.json\n├── main.py                  # FastAPI application entry point\n└── .env                     # Environment variables\n```\n\n## API Endpoints\n\n| Endpoint | Method | Description | Request Body | Response |\n|----------|--------|-------------|-------------|----------|\n| `/` | GET | Health check | None | `{\"message\": \"API is working!\"}` |\n| `/auth/register` | POST | Register new user | `{\"username\": \"string\", \"email\": \"string\", \"password\": \"string\"}` | User object |\n| `/auth/token` | POST | Login and get token | Form data with username/password | `{\"access_token\": \"string\", \"token_type\": \"bearer\"}` |\n| `/users/me/` | GET | Get current user | None (requires auth token) | User object |\n\n## Setup Instructions\n\n### Backend Setup\n\n1. Create a virtual environment and activate it:\n   ```bash\n   python -m venv venv\n   # Windows\n   venv\\Scripts\\activate\n   # macOS/Linux\n   source venv/bin/activate\n   ```\n\n2. Install backend dependencies:\n   ```bash\n   pip install -r backend/requirements.txt\n   ```\n\n3. Copy the example file to create your .env file:\n```bash\n# Windows\ncopy example.env .env\n\n# macOS/Linux\ncp example.env .env\n   ```\n\n4. Run the FastAPI server:\n   ```bash\n   uvicorn main:app --reload\n   ```\n\n### Frontend Setup\n\n1. Navigate to the frontend directory:\n   ```bash\n   cd frontend\n   ```\n\n2. Install dependencies:\n   ```bash\n   npm install\n   ```\n\n3. Ensure React Router is properly installed\n    ```bash\n    npm install react-router-dom\n    ```\n\n4. Start the development server:\n   ```bash\n   npm run dev\n   ```\n\n5. Access the application at http://localhost:5173\n\n## Features\n\n- **User Authentication:** JWT-based authentication system\n- **User Registration:** Create new user accounts\n- **User Profile:** View and manage user information\n- **Protected Routes:** Restrict access to authenticated users\n\n## Technologies Used\n\n- **Backend:**\n  - FastAPI: Modern, fast web framework for building APIs\n  - SQLAlchemy: SQL toolkit and ORM\n  - PyJWT: JSON Web Token implementation\n  - Python-decouple: Environment variable management\n\n- **Frontend:**\n  - React: JavaScript library for building user interfaces\n  - Axios: Promise-based HTTP client\n  - React Router: Navigation and routing\n\n## Screenshots\n\n![Register User](/frontend/src/assets/image-7.png)\n![Login Registered User](/frontend/src/assets/image-8.png)\n![User Profile](/frontend/src/assets/image-9.png)\n![FastAPI docs](/frontend/src/assets/image-4.png)\n\n## Development\n\nTo access the API documentation locally, visit: http://localhost:8000/docs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcynthiawahome%2Ffastapi-react-integration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcynthiawahome%2Ffastapi-react-integration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcynthiawahome%2Ffastapi-react-integration/lists"}