Skip to content

Commit 65e1689

Browse files
jordangeorgepwdel
andauthored
Update frontend README.md (#495)
* Update frontend README.md * Update README.md to focus only on the frontend and docker --------- Co-authored-by: Patrick Delaney <patrick.del@gmail.com>
1 parent b92bf21 commit 65e1689

File tree

1 file changed

+56
-2
lines changed

1 file changed

+56
-2
lines changed

frontend/README.md

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,57 @@
1-
# Getting Started with Create React App
1+
# SocialPredict Frontend
22

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

Comments
 (0)