|
1 | | -# Getting Started with Create React App |
| 1 | +# SocialPredict Frontend |
2 | 2 |
|
3 | | -* Need to update this with instructions for vite including port. |
| 3 | +This is the frontend application for SocialPredict, built with React and Vite. |
| 4 | + |
| 5 | +This gets you started with running only the frontend using Docker. |
| 6 | + |
| 7 | +#### Prerequisites |
| 8 | + |
| 9 | +- **Docker**: Version 20.10 or higher |
| 10 | +- **Docker Compose**: Version 2.0 or higher |
| 11 | + |
| 12 | +#### Running with Docker |
| 13 | + |
| 14 | +1. **Build the frontend Docker image:** |
| 15 | + |
| 16 | + ```bash |
| 17 | + cd /path/to/socialpredict |
| 18 | + cd frontend |
| 19 | + docker build -t socialpredict . |
| 20 | + ``` |
| 21 | + |
| 22 | +2. **Run the frontend container:** |
| 23 | + |
| 24 | + ```bash |
| 25 | + docker run -d -p 5173:5173 socialpredict |
| 26 | + ``` |
| 27 | + |
| 28 | + This will start the Vite development server with the following features: |
| 29 | + |
| 30 | + - **Port**: Typically runs on `http://localhost:5173` (Vite's default port) |
| 31 | + - **Host**: Accessible from other devices on your network |
| 32 | + - **Hot reload**: Automatic reloading when files change |
| 33 | + - **Fast builds**: Vite's lightning-fast development experience |
| 34 | + |
| 35 | +3. **Access the application:** |
| 36 | + Navigate to `http://localhost:5173` on your browser to view the application. |
| 37 | + |
| 38 | +4. **When ready, stop the container:** |
| 39 | + ```bash |
| 40 | + docker stop $(docker ps -n 1 -a -q) |
| 41 | + ``` |
| 42 | + |
| 43 | +### Mobile Responsiveness |
| 44 | + |
| 45 | +The application is fully responsive and includes: |
| 46 | + |
| 47 | +- Mobile-optimized navigation with hamburger menu |
| 48 | +- Touch-friendly interface |
| 49 | +- Responsive design for all screen sizes |
| 50 | + |
| 51 | +### Tech Stack |
| 52 | + |
| 53 | +- **React 18**: UI framework |
| 54 | +- **Vite**: Build tool and development server |
| 55 | +- **Tailwind CSS**: Styling |
| 56 | +- **React Router**: Client-side routing |
| 57 | +- **Chart.js & Recharts**: Data visualization |
0 commit comments