Skip to content

Commit 010419f

Browse files
athrael-sojuathrael-soju
committed
feat: initialize Next.js frontend with package setup and environment configuration
1 parent aea0960 commit 010419f

3 files changed

Lines changed: 159 additions & 39 deletions

File tree

‎frontend-nextjs/README.md‎

Lines changed: 157 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,173 @@
1-
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
1+
# FastAPI Project - Frontend (Next.js)
22

3-
## Getting Started
3+
The frontend is built with [Next.js 15](https://nextjs.org/), [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), [TanStack Query](https://tanstack.com/query), [Tailwind CSS](https://tailwindcss.com/), and [shadcn/ui](https://ui.shadcn.com/).
44

5-
First, run the development server:
5+
## Frontend development
6+
7+
Before you begin, ensure that you have either the Node Version Manager (nvm) or Fast Node Manager (fnm) installed on your system.
8+
9+
* To install fnm follow the [official fnm guide](https://github.com/Schniz/fnm#installation). If you prefer nvm, you can install it using the [official nvm guide](https://github.com/nvm-sh/nvm#installing-and-updating).
10+
11+
* After installing either nvm or fnm, proceed to the `frontend-nextjs` directory:
12+
13+
```bash
14+
cd frontend-nextjs
15+
```
16+
* If the Node.js version specified in the `.nvmrc` file isn't installed on your system, you can install it using the appropriate command:
17+
18+
```bash
19+
# If using fnm
20+
fnm install
21+
22+
# If using nvm
23+
nvm install
24+
```
25+
26+
* Once the installation is complete, switch to the installed version:
27+
28+
```bash
29+
# If using fnm
30+
fnm use
31+
32+
# If using nvm
33+
nvm use
34+
```
35+
36+
* Within the `frontend-nextjs` directory, install the necessary NPM packages:
37+
38+
```bash
39+
npm install
40+
```
41+
42+
* And start the live server with the following `npm` script:
643

744
```bash
845
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
1546
```
1647

17-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
48+
* Then open your browser at http://localhost:3000/.
49+
50+
Notice that this live server is not running inside Docker, it's for local development, and that is the recommended workflow. Once you are happy with your frontend, you can build the frontend Docker image and start it, to test it in a production-like environment. But building the image at every change will not be as productive as running the local development server with live reload.
51+
52+
Check the file `package.json` to see other available options.
53+
54+
### Technology Stack
55+
56+
This Next.js frontend uses:
57+
58+
- **Next.js 15** with App Router for the React framework
59+
- **Tailwind CSS v4** for styling with modern CSS features
60+
- **shadcn/ui** for beautiful, accessible UI components
61+
- **Lucide React** for consistent iconography
62+
- **TanStack Query** for server state management
63+
- **TypeScript** for type safety
64+
- **Generated API Client** for backend integration
65+
66+
### Removing the frontend
67+
68+
If you are developing an API-only app and want to remove the frontend, you can do it easily:
1869

19-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
70+
* Remove the `./frontend-nextjs` directory.
2071

21-
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
72+
* In the `docker-compose.yml` file, remove the whole service / section `frontend-nextjs`.
2273

23-
## Learn More
74+
* In the `docker-compose.override.yml` file, remove the whole service / section `frontend-nextjs`.
2475

25-
To learn more about Next.js, take a look at the following resources:
76+
Done, you have a frontend-less (api-only) app. 🤓
2677

27-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
78+
---
2979

30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
80+
If you want, you can also remove the `FRONTEND` environment variables from:
81+
82+
* `.env`
83+
* `./scripts/*.sh`
84+
85+
But it would be only to clean them up, leaving them won't really have any effect either way.
86+
87+
## Generate Client
88+
89+
### Automatically
90+
91+
* Activate the backend virtual environment.
92+
* From the top level project directory, run the script:
93+
94+
```bash
95+
./scripts/generate-client.sh
96+
```
3197

32-
## Deploy on Vercel
98+
* Commit the changes.
3399

34-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
100+
### Manually
101+
102+
* Start the Docker Compose stack.
103+
104+
* Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` at the root of the `frontend-nextjs` directory.
105+
106+
* To generate the frontend client, run:
107+
108+
```bash
109+
npm run generate-client
110+
```
111+
112+
* Commit the changes.
113+
114+
## Features
115+
116+
This Next.js frontend includes:
117+
118+
- **Authentication**: JWT-based authentication with login/logout functionality
119+
- **Dashboard**: Modern dashboard with sidebar navigation
120+
- **User Management**: User profile and settings management
121+
- **Responsive Design**: Mobile-first responsive design with dark mode support
122+
- **Type Safety**: Full TypeScript integration with generated API types
123+
- **Modern UI**: Beautiful components built with shadcn/ui and Tailwind CSS
124+
125+
## Project Structure
126+
127+
```
128+
frontend-nextjs/
129+
├── app/ # Next.js App Router pages
130+
├── components/ # Reusable React components
131+
│ └── ui/ # shadcn/ui components
132+
├── lib/ # Utility functions and configurations
133+
├── hooks/ # Custom React hooks
134+
├── client/ # Generated API client
135+
├── public/ # Static assets
136+
└── styles/ # Global styles and Tailwind config
137+
```
138+
139+
## Development
140+
141+
### Adding New Components
142+
143+
To add new shadcn/ui components:
144+
145+
```bash
146+
npx shadcn@latest add [component-name]
147+
```
148+
149+
### Building for Production
150+
151+
```bash
152+
npm run build
153+
```
154+
155+
### Running Tests
156+
157+
```bash
158+
npm run test
159+
```
160+
161+
## Docker
162+
163+
The frontend is containerized and can be run with Docker:
164+
165+
```bash
166+
# Build the image
167+
docker build -t frontend-nextjs .
168+
169+
# Run the container
170+
docker run -p 3000:3000 frontend-nextjs
171+
```
35172

36-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
173+
Or use the provided Docker Compose setup from the project root.

‎frontend-nextjs/package-lock.json‎

Lines changed: 1 addition & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend-nextjs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
"lucide-react": "^0.454.0",
5454
"next": "15.2.4",
5555
"next-themes": "latest",
56+
"openapi-ts": "^0.3.4",
5657
"react": "^19",
5758
"react-day-picker": "9.8.0",
5859
"react-dom": "^19",
@@ -70,7 +71,6 @@
7071
"@types/node": "^22",
7172
"@types/react": "^19",
7273
"@types/react-dom": "^19",
73-
"openapi-ts": "^0.3.4",
7474
"postcss": "^8.5",
7575
"tailwindcss": "^3.4.17",
7676
"typescript": "^5"

0 commit comments

Comments
 (0)