A serverless Next.js React application using FaunaDB and CSS Modules, deployed to Vercel.
An API key to Fauna is required, see .env.sample
Using Vercel's serverless functions, order data can be retrieved by
GET /api/orders
This method of styling is an alternative to my usual styling via styled-components, however after using Svelte I've come to enjoy custom classes on each HTML tag that needs styled. Although global styles may be a hinderance, I find this method to be explicit and relatively easy to understand.
global.css
is the default stylesheet that comes with gatsby-starter-default. I've come to enjoy the defaults provided to bulid on top of.
Components are stored in a subdirectory of components
named the component name in PascalCase, along with their respective CSS file and index.js
file for export.
components/Header/Header.js
components/Header/Header.module.css
components/Header/index.js
Both pages/
and api/
use file-system routing from Next.js and Vercel's serverless functions.
- user authentication and roles
- data pagination for scale
- global data storage in api route for active containers
- distribution center suggestion
- clarity on FIFO ordering
- display "Days since order creation" with dynamic coloring
- analytics dashboard for order history/throughput
- better mobile styling
- PWA status for mobile installation
- better SEO w/ manifest