Sailing Through the Pandemic was a website providing information to ocean voyagers and liveaboard sailors about port closures and government restrictions related to the COVID-19 pandemic. This monorepo contains all frontend and backend code for the site.
The backend API is served by Strapi using GraphQL. We persist with SQLite in development and MySQL in production, both connected to Strapi through Bookshelf.
The frontend is written in React and Next.js. Styling is done with styled jsx. Maps are rendered by Mapbox with react-map-gl. We use Apollo to parse the GraphQL provided by the backend.
You'll want node 12 LTS, yarn and a clone of this repository.
git clone [email protected]:jameshome/sailpan.git
cd sailpan
yarn install-backend
yarn install-frontend
yarn dev
This will install required node_modules and start dev instances of the frontend and backend. You can also start the frontend and backend separately, check out the root level package.json for help.
-
css: Set all colors, elevations, and fonts in
utils/style. Call the corresponding object properties in each component's<style jsx>elements. Use global css and inline styling sparingly. -
js: Use the Prettier defaults. Use function components and Hooks instead of classes.
Strapi and Next.js are both run as pm2 processes, proxied through nginx.
Production installation looks something like this:
git clone [email protected]:jameshome/sailpan.git dist
cd dist/backend
yarn
scp example.com:~/src/sailpan/frontend/.env .
env NODE_ENV=production yarn build
pm2 start ecosystem.config.js
cd dist/frontend
yarn
scp example.com:~/src/sailpan/backend/.env .
env NODE_ENV=production yarn build
pm2 start ecosystem.config.js
pm2 startup
pm2 save
Ultimately deployment will be automated, but until then:
cd dist
git pull
cd dist/backend
env NODE_ENV=production yarn build
pm2 restart ecosystem.config.js
cd ../frontend
env NODE_ENV=production yarn build
pm2 restart ecosystem.config.js
- Report category icons from Ben Alderfer's Recreation and Cultural Interest collection on The Noun Project. Thanks Ben!