A service layer to add additional functionality to the Code and Coffee website.
The Code and Coffee website (https://codeandcoffee.org/) is built using squarespace. This service allows us to construct custom web components that can be used to add more complicated elements to the website than what would otherwise be possible using Squarespace.
The project is built following best practices and is a good reference for anyone trying to build professional-adjacent quality projects.
Any questions about this project can be directed to Brian Towne.
You need NodeJS installed locally to run this project. You can download it from https://nodejs.org/en/download/.
When installed, run the following script to install.
npm install
The project has a series of Environment Variables that need to be set to run the project locally. These are stored in a file called .env
in the root of the project. This file is not checked in to source control. You will need to create this file and populate it with the values in the .env.template
file.
To run the project locally, run the following scripts in separate terminals.
npm run serve:ui
to run the UI.
npm run serve:api
to run the serverless api. Needs to be rerun on each change to the api code.
npm run mockoon-start
to run the mock api server.
npm run nodemon:api
to build the api code and rebuild on changes.
NodeJS - Used to run javascript in the backend to retreive data for the website.
Typescript - Adds typing to the code to make it easier to read and maintain.
Vite - Used to bundle the web component code to make it efficient to consume.
Rollup - Used to by Vite to bundle the web component code and used to bundle the lambda code to make it easier to send to AWS.
prettier - Used to organize the code to make it easier to read and maintain.
ESLint - Used to enforce code standards to make it easier to read and maintain.
Jest - Used to run unit tests to make sure the code is working as expected (on the odd occasion we write tests).
React - Used to build the web components. Makes it easier to build interactive and reactive components.
Amazon Web Services (AWS) - Used to host the project.
Serverless Framework - Used to simplify the deployment of the service to AWS and to enable simulating the service locally for development and testing.
Nodemon - Used to automatically restart the service when changes are made to the code.
Mockoon - Used to simulate APIs for testing locally.
GitHub Actions - Used to automate the deployment of the project to AWS.
GitHub - Used to store the code and manage the project.
Swagger - Used to document the API.
./src/api
This is the source code for the API layer. The API layer allows us to fetch data from services to allow the web components to be timely. Keep in mind that there is a cache that is used to store the results of the API calls. This cache is used to reduce the cost of the calls to the API. This means that it takes about 5 minutes (or so) before data is updated on calls to the API.
./src/ui
This is the source code for the web components. The web components are build using react and are embedded on to the main website.
./public
This is where the public resources are stored. All files are served as is.
./.github
Where all the automated deployment workflows and general github configurations are stored.
./dev
Local development only resources are stored here.
./readme
Where all the resources used in the readme are stored.