We build websites using web technologies, this is a showcase product we've built in our spare time. The goal is to improve by getting feedback from the community, while providing an example of modern, realistic (albeit simplified) React codebase.
This codebase offers valuable insights to React developers of all skill levels while (we hope!) still being relatively easy to understand.
-
Frontend built on Next.js, bootsrtapped with
create-next-app -
Backend build using Express.js and Mongoose
-
Authentication provided by Google OAuth 2.0, implemented through the handy-dandy Passport.js. Everything is cookie-based so that no token needs to be handled explicitly by the frontend
-
UI based on ant-design
-
Styling of components done through styled-components
-
API calls to through Skyscanner's RapidAPI endpoint through axios
-
Simple local state management through Recoil, without redux, mobx or similar
-
Some images are form the amazing and trustworthy Unsplash
-
Written entirely in JavaScript (no TypeScript)
- Install MongoDB on your local machine. We suggest using Brew to do so, if you are on MacOS
- Rename the .env.sample files in the
/frontendand/backenddirectories in .env - Customize the empty variables in the environment file:
- You can get GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET variables by following the instructions on Google website
- You can get a NEXT_PUBLIC_FLIGHTSCANNER_API variable by signing up on RapidAPI
You can run both the frontend and the backend server from the root directory. First, install the dependencies:
npm install
# or
yarn install
Then, run both servers using:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result. Backend server will be running on http://localhost:5000/api
This is a simple backlog of nice-to-haves that we might or might not implement in the future:
- Move skyscanner APIs call from frontend to backend, to make sure public key cannot be hijacked in any way
-
Feel free to shoot us an email at [authorname][at]gmail[dot]com