You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The backend code in this repository originated from the [FastAPI full stack template](https://github.com/fastapi/full-stack-fastapi-template) and includes AI components that make this AI engineer template unique.
14
14
15
15
To fast-track the MVP building process, which is crucial for most AI products, we have chosen a simple tech stack. This allows people to focus more on iterating through product features rather than on DevOps from the outset.
@@ -21,7 +21,7 @@ To fast-track the MVP building process, which is crucial for most AI products, w
2. Follow the original [README]('README-original.md') to docker compose and set up Postgres, reverse proxy and Fastapi server. You can leave the original React fronend running if you'd like. Or, you can just comment out the frontend bit in the docker compose file.
24
+
2. Follow the original [README]('README-original.md') to docker compose and set up Postgres, reverse proxy and Fastapi server. You can leave the original React fronend running if you'd like. Or, you can just comment out the frontend bit in the docker compose file.
25
25
3. Run nextjs app in local
26
26
```bash
27
27
cd frontend
@@ -33,25 +33,25 @@ npm install
33
33
npm run dev
34
34
```
35
35
36
-
Note: This is a fork from the original [Full Stack FastAPI Template](https://github.com/tiangolo/full-stack-fastapi-template"Full Stack FastAPI Template"). Instead of the original Reactjs frontend, we used Nextjs14 in this repository.
36
+
Note: This is a fork from the original [Full Stack FastAPI Template](https://github.com/tiangolo/full-stack-fastapi-template"Full Stack FastAPI Template"). Instead of the original Reactjs frontend, we used Nextjs14 in this repository.
37
37
38
-
Here are the reasons why we wanted to build with Nextjs (a full stack framework built on top of React) over React.
38
+
Here are the reasons why we wanted to build with Nextjs (a full stack framework built on top of React) over React.
39
39
- Dependencies reduction
40
-
A barebone Reactjs application would require installation of dependency packages to achieve multi-page routing, managing API requests, caching etc. There are a number of solutions out there, e.g. in the original repo, @tanstack/react-router is used for routing, @tanstack/react-query + axios are used for managing API requests and caching.
41
-
In a Nextjs application, all these functions are built in without the need for third-party libraries. Also, Nextjs14 (app router) uses file-based routing which means the routing is automatically done via the folder structure.
40
+
A barebone Reactjs application would require installation of dependency packages to achieve multi-page routing, managing API requests, caching etc. There are a number of solutions out there, e.g. in the original repo, @tanstack/react-router is used for routing, @tanstack/react-query + axios are used for managing API requests and caching.
41
+
In a Nextjs application, all these functions are built in without the need for third-party libraries. Also, Nextjs14 (app router) uses file-based routing which means the routing is automatically done via the folder structure.
42
42
43
-
- Server side rendering
43
+
- Server side rendering
44
44
Data fetching and mutation in a Nextjs application is mostly dealt in server side while client side data fetching is also allowed. This offers advantages to get away with 'useEffect' and other cumbersome boiler plate codes in order to do data fetching at client side. Server side rendering also offers performance benefit.
45
45
46
-
- Popularity
47
-
Nextjs is getting more and more popular. There are good amount of frontend projects and Youtube tutorials based on Nextjs, which are beginner friendly.
46
+
- Popularity
47
+
Nextjs is getting more and more popular. There are good amount of frontend projects and Youtube tutorials based on Nextjs, which are beginner friendly.
Since Nextjs offers caching out-of-box (more caching details refer to [Nextjs caching](http://https://nextjs.org/docs/app/building-your-application/caching"Nextjs caching")), we don't have to use React Query, which is an awesome library to manage client side API requests but it has a little bit learning curve for beginners. Rather, the API requests can just be made via fetch (Nextjs added some improvement on the original javascript fetch function). We chose a very light-weight OpenAPI client library just to read the openapi specification file (saved as 'openapi.json') and make sure we have consistent and clearn code.
51
+
Since Nextjs offers caching out-of-box (more caching details refer to [Nextjs caching](http://https://nextjs.org/docs/app/building-your-application/caching"Nextjs caching")), we don't have to use React Query, which is an awesome library to manage client side API requests but it has a little bit learning curve for beginners. Rather, the API requests can just be made via fetch (Nextjs added some improvement on the original javascript fetch function). We chose a very light-weight OpenAPI client library just to read the openapi specification file (saved as 'openapi.json') and make sure we have consistent and clearn code.
52
52
53
-
Here is an example.
54
-
First, in '/frontend/lib/api/index.ts' we initiate the API client.
53
+
Here is an example.
54
+
First, in '/frontend/lib/api/index.ts' we initiate the API client.
55
55
56
56
```javascript
57
57
importcreateClientfrom"openapi-fetch";
@@ -75,25 +75,25 @@ async function getItems() {
75
75
return data;
76
76
}
77
77
```
78
-
This is as cleanest as it can possibly get, in my personal opinion, for handling frontend API requests.
78
+
This is as cleanest as it can possibly get, in my personal opinion, for handling frontend API requests.
79
79
80
-
### UI library
81
-
We use [Shadcn](https://ui.shadcn.com/ "Shadcn"). It's light-weight, all the UI components are imported as plain javascript code for transparency. So, you can modify to suit your need.
80
+
### UI library
81
+
We use [Shadcn](https://ui.shadcn.com/ "Shadcn"). It's light-weight, all the UI components are imported as plain javascript code for transparency. So, you can modify to suit your need.
82
82
83
83
### Deployment
84
84
Docker compose is up to date now with nextjs frontend. You can just deploy through docker compose on a remote server.
85
85
A friendly warning is this code was recently written (in3-4 days), so there are still bugs. All pull requests are welcome!
86
86
87
87
### Roadmap
88
-
- Tidy up the error handling bit
88
+
- Tidy up the error handling bit
89
89
- Add task queue for long last jobs (Celery + Redis)
90
90
-AI chat interface
91
91
92
92
### Backend
93
93
We did not change the backend code, all the other details remain valid from the original [README](README-original.md)
94
94
95
95
### EuclideanAI
96
-
Who the hell is EuclideanAI? we are a boutique AI& Data consultancy who provide purpose-built AI, data, machine learning solutions for our clients. [Feel free to reach out!](https://euclideanai.com/contactus/)
96
+
Who the hell is EuclideanAI? we are a boutique AI& Data consultancy who provide purpose-built AI, data, machine learning solutions for our clients. [Feel free to reach out!](https://euclideanai.com/contactus/)
0 commit comments