}
20 | {position === null ? null : (
21 |
22 | You are here
23 | )
24 | }
25 |
26 | }
--------------------------------------------------------------------------------
/frontend/src/models/facility.ts:
--------------------------------------------------------------------------------
1 | interface Facility {
2 | locationID: string;
3 | applicant: string;
4 | facilityType: string;
5 | cnn: string;
6 | locationDescription: string;
7 | address: string;
8 | blockLot: string;
9 | block: string;
10 | lot: string;
11 | permit: string;
12 | status: string;
13 | foodItems: string;
14 | x: number;
15 | y: number;
16 | latitude: number;
17 | longitude: number;
18 | schedule: string;
19 | daysHours: string;
20 | NOISent: string;
21 | approved: string;
22 | received: string;
23 | priorPermit: string;
24 | expirationDate: string;
25 | location: string;
26 | firePreventionDistricts: string;
27 | policeDistricts: string;
28 | supervisorDistricts: string;
29 | zipCodes: string;
30 | neighborhoodsOld: string;
31 | }
32 |
--------------------------------------------------------------------------------
/frontend/src/utils/fetcher.ts:
--------------------------------------------------------------------------------
1 | // @ts-ignore
2 | export const fetcher = (...args: any[]) => fetch(...args).then(res => res.json())
3 |
4 |
5 |
--------------------------------------------------------------------------------
/frontend/src/utils/getDistance.ts:
--------------------------------------------------------------------------------
1 | export function getDistanceFromLatLonInKm(lat1: number, lon1: number, lat2: number, lon2: number): number {
2 | const R: number = 6371; // Radius of the Earth in kilometers
3 | const dLat: number = deg2rad(lat2 - lat1); // Convert latitude difference to radians
4 | const dLon: number = deg2rad(lon2 - lon1); // Convert longitude difference to radians
5 | const a: number =
6 | Math.sin(dLat / 2) * Math.sin(dLat / 2) +
7 | Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
8 | Math.sin(dLon / 2) * Math.sin(dLon / 2);
9 | const c: number = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
10 | const distance: number = R * c; // Distance in kilometers
11 | return distance;
12 | }
13 | function deg2rad(deg: number): number {
14 | return deg * (Math.PI / 180);
15 | }
--------------------------------------------------------------------------------
/frontend/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"],
20 | "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 |
--------------------------------------------------------------------------------
/frontend/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "module": "ESNext",
5 | "moduleResolution": "Node",
6 | "allowSyntheticDefaultImports": true
7 | },
8 | "include": ["vite.config.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/frontend/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()]
7 | })
8 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Food trucks
2 | This is a demo project showcase usage of Go, React, Redis, Docker.
3 | Data is from San Francisco's food truck open dataset.
4 |
5 | ## Features
6 | As a user, when you go to the websites' home page, you can see a list of marker,
7 | each marker represents a food truck.
8 |
9 | 
10 |
11 | When you click a marker, you can see the food truck's applicant, location, and food items.
12 |
13 | 
14 |
15 | If you live in San Francisco, you want see the trucks near your location,
16 | you can click 'Your Location' button, the map will be switched to your location
17 |
18 | 
19 |
20 | As a admin, you can search all trucks who are serving a type of food, e.g. taco
21 |
22 | 
23 |
24 | ## Tech Stacks
25 | ### Backend
26 | - Redis as in memory database
27 | - redis str, get truck(marshalled as json) by ID
28 | - redis geo, to search nearby trucks by latitude, longitude, and radius.
29 | - redis zset, to search a list of trucks by food items it served.
30 | - Go
31 | - Iris Web Framework
32 |
33 | ### Frontend
34 | - React
35 | - react-leaflet for map related feature
36 | - swr for state management
37 |
38 | ## Design pattern and best practice
39 | - *hexagonal architecture*
40 |
41 | 
42 |
43 | The core of backend is /backend/packages/services/facilitySvc.go, service layer doesn't depend on
44 | storage layer, and doesn't depend on UI layer.
45 | Both Cli and Web can use facility service.
46 |
47 | - *Dependency Injection*
48 |
49 | facilitySvc is not hardcoded depending on rdb package(my own Redis lib), so if I want
50 | change storage to mysql or mongodb later, I can implement the interface
51 | and inject the implementation to service.
52 |
53 | This also conform to Open/Close principle, the facilitySvc is open to extend functionality,
54 | but close to code change
55 |
56 | - *Separation of Concern*
57 |
58 | When do frontend coding, I also tried to apply this principle, for the truck map frontend.
59 | I use 3 components to render map (Map, FacilityMaker, SwitchLocation), each component care about it's own job, improved readability.
60 |
61 | - *Modular and DRY - Don't repeat your self*
62 |
63 | I aimed to separate business logic from infrastructure code in our project. Taking the `facilitySvc` as an example:
64 | each facility can have multiple food items, and each food item can be associated with multiple facilities.
65 | This relationship pertains to business logic. In contrast, connecting to Redis and marshalling objects to JSON strings are common infrastructure tasks.
66 |
67 | By wrapping Redis operations into a standalone package, instead of embedding this code within the facility service,
68 | I made the codebase more modular and reusable. This separation improves maintainability and allows infrastructure code
69 | to be reused across different services without duplication.
70 |
71 | - *Template pattern*
72 |
73 | There are a lot of boilerplate to start a web application,
74 | I put these code to /backend/packages/util/irisbase applying Template Pattern,
75 | so the main file(/backend/cmds/web/main) looks clean and straightforward.
76 |
77 | - *Error handling*
78 |
79 | Each function annotate error detail (e.g. which line throws the error, the cause of the error).
80 | In develop mode, the API returns error detail to help frontend user to locate the issue.
81 | In production mode, the API just return an 500 error to hide technical detail
82 |
83 | - *Generic Programming to improve ability to reuse code*
84 |
85 | For example, the parse function in /backend/packages/util/yaml.go demonstrates how to create a reusable utility for parsing
86 | YAML files into any specified type. By using generics, we can create a single, versatile function that works with
87 | any data structure, enhancing our ability to write clean, reusable, and maintainable code.
88 | ```
89 | func parse[T any](t *T, filePath string) (err error) {
90 | var f *os.File
91 | f, err = os.Open(filePath)
92 | if err != nil {
93 | return
94 | }
95 | defer func(f *os.File) {
96 | err = f.Close()
97 | }(f)
98 |
99 | if err = yaml.NewDecoder(f).Decode(t); err != nil {
100 | return err
101 | }
102 | return nil
103 | }
104 | ```
105 |
106 |
107 | ## Implementations
108 | ### Frontend
109 | #### Code Structure
110 | ```
111 | --frontend/
112 | ----src/
113 | ------map/
114 | --------FacilityMarkers.tsx # add markers to map
115 | --------Map.tsx # map container
116 | --------SwitchLoaction.tsx # switch to your location
117 | ------models/
118 | ------utils/
119 | ------config.ts # global configs
120 | ----.env.development # development enviroment virables
121 | ```
122 | #### Api call and state management
123 | All meaningful code resides in /frontend/src/map, code in models and utils is very simple.
124 | the useSWR hook combine api call and state management, one single line of code save the trouble of useEffect hook.
125 | ```
126 | const {data: center} = useSWR(Config.APIHost + '/api/facilities/center', fetcher)
127 | ```
128 | #### Environment variables
129 | The frontend app might run in two mode
130 | ##### Development Mode
131 | In development mode (pnpm dev), I start two web server,
132 | http://localhost:8080 as backend http://localhost:5173 as frontend, so the api endpoint is http://localhost:8080/api/***.
133 | I put this dev environment settings to .env.development
134 | ```
135 | VITE_REACT_APP_API_HOST='http://localhost:8080'
136 | ```
137 | ##### Production Mode
138 | In production mode frontend and backend are served as single app(the distribution of frontend is copied to
139 | /backend/web, and served by backend web server).
140 | I can use relative path to call backend api /api/facilities. In production there won't be .env file,
141 | so the api host default to empty string''.
142 |
143 | ##### config.js
144 | All environment reading code are put into config.ts , ensure single source of truth.
145 | ```
146 | export const Config = {
147 | APIHost : import.meta.env.VITE_REACT_APP_API_HOST || '',
148 | }
149 | ```
150 | #### Map Related Features
151 | I tried google map API first, but it's not totally free, I don't want checkin API Key to repo. And I want
152 | people can easily play with this app, so I followed this link https://medium.com/@ujjwaltiwari2/a-guide-to-using-openstreetmap-with-react-70932389b8b1
153 | to use react-leaflet
154 | ### Backend
155 | #### Code structure
156 | ```
157 | --cmds
158 | ----cli/ # entrance of cli
159 | ----web/ # entrance of web
160 | --packages
161 | ----controllers/ # endpoint of APIs
162 | ----models/
163 | ----services/ # implement business logic of food trucks
164 | ----utils/ # infrastrcutres
165 | --web/ # put frontend distribution here
166 | ```
167 | #### Seed Data
168 | In packages/services/facilitySvc Seed() function, it read configs/data.csv, and parse it as Facility array,
169 | then populate the data to redis.
170 |
171 | ### Endpoints
172 | - */api/facilities/center* Get the center of all trucks
173 | - */api/facilities?lat=&lon=&radius=* Get the facilities near the center with in the radius
174 | ### Cli
175 | - share Facility Service with web, provides function of search facility by food items
176 |
177 | ## Installation
178 | If you don't have go, node, pnpm installed on you local machine, you can simply use docker compose to start the app.
179 | ### Docker
180 | in the root directory of the project, run
181 | ```shell
182 | docker-compose up
183 | ```
184 | When you see messages similar to below, then the app is up.
185 | ```shell
186 | food-truck-backend-1 | Now listening on:
187 | food-truck-backend-1 | > Network: http://172.21.0.3:8080
188 | food-truck-backend-1 | > Local: http://localhost:8080
189 | food-truck-backend-1 | Application started. Press CTRL+C to shut down.
190 | ```
191 | ### Web
192 | Use your browser, go to http://localhost:8080 to see the food truck app.
193 | ### Cli
194 | to run cli
195 | ```shell
196 | # use docker ps to check docker container name
197 | ⚡➜ ~ docker ps
198 | CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
199 | 0f6039ec90d6 food-truck-backend "./main" 5 minutes ago Up 5 minutes 0.0.0.0:8080->8080/tcp food-truck-backend-1
200 | 40f20e7696e4 redis:latest "docker-entrypoint.s…" 5 minutes ago Up 5 minutes 0.0.0.0:6379->6379/tcp food-truck-redis-1
201 |
202 | # start a shell session
203 | ⚡➜ ~ docker exec -it food-truck-backend-1 /bin/bash
204 |
205 | # in the shell session, run ./food-cli
206 | root@0f6039ec90d6:/go/src/app# ./food-cli
207 | Load Config from ./configs/cli.yaml
208 |
209 | # when you saw the 'Enter Food Item to search facility:', input a food item you want to find
210 | Enter Food Item to search facility: breakfast
211 | Munch A Bunch MISSION ST: 14TH ST to 15TH ST (1800 - 1899)
212 | Munch A Bunch BRYANT ST: ALAMEDA ST intersection
213 | Munch A Bunch FULTON ST: FRANKLIN ST to GOUGH ST (300 - 399)
214 | Munch A Bunch LARKIN ST: FERN ST to BUSH ST (1127 - 1199)
215 | Munch A Bunch 12TH ST: ISIS ST to BERNICE ST (332 - 365)
216 | Munch A Bunch 07TH ST: CLEVELAND ST to HARRISON ST (314 - 399)
217 | Munch A Bunch PARNASSUS AVE: HILLWAY AVE to 03RD AVE (400 - 599)
218 | Munch A Bunch 17TH ST: SAN BRUNO AVE to UTAH ST (2200 - 2299)
219 | ```
220 |
221 | ## Development
222 | ### Spin up a redis server
223 | ```shell
224 | docker run --name food-redis -d -p 6379:6379 redis
225 | ```
226 | ### Start backend
227 | go to /backend,
228 | ```shell
229 | go run backend/cmds/web/main.go
230 | ```
231 | if you got the following error, it means backend can not connect to a host 'redis'
232 | ```
233 | panic: facilitySvc.go:58 failed to cache facilities, dial tcp: lookup redis: no such host
234 | ```
235 | you can add 'redis' to you development machine's /etc/hosts file
236 | ```
237 | 127.0.0.1 localhost redis
238 | ```
239 | or you can modify /backend/configs/web.yaml file, change the following line
240 | ```
241 | addr: redis:6379
242 | ```
243 | to
244 | ```
245 | addr: localhost:6379
246 | ```
247 | ### Start CLI
248 | ```
249 | go run backend/cmds/cli/main.go
250 | ```
251 | Cli's config file is at /backend/configs/cli.yaml
252 |
253 | ### Start Frontend
254 | you need to install node, pnpm, then go to frontend/, run
255 | ```
256 | pnpm install
257 | pnpm dev
258 | ```
--------------------------------------------------------------------------------
/scripts/build_front.sh:
--------------------------------------------------------------------------------
1 | pushd ../frontend
2 | pnpm build
3 | rm -rf ../backend/web
4 | cp -a dist ../backend/web
5 |
--------------------------------------------------------------------------------
/scripts/start_redis.sh:
--------------------------------------------------------------------------------
1 | docker run --name food-redis -d -p 6379:6379 redis
--------------------------------------------------------------------------------