React todolist

Hey 👋 This is my project for SE_19 Web Technologies Basics and ID_19 Responsive Web Design. It is deployed at todolist.koenidv.de.

Setting up your environment

1. Once you cloned the repo, make sure to run npm install to install all dependencies.
2. Run npm start and a server will start on localhost. That's it!
3. This project uses Fauna, a serverless document database. A public key for this database is already included. If you want to use your own Fauna instance, that's easy.

Setting up a custom Fauna instance

1. After creating a Fauna account and a database for this project, go to your Web Shell and run the 3 queries provided in FaunaSetup.md.
2. Head to Security and create a new key using the new client role. Copy the generated key.
3. Paste this key into the PUBLIC_CLIENT_KEY constant in faunaAuth. If you have selected a region other than EU, make sure to also update the domain used in the client creation.
4. Done! You will use your own Fauna instance now.

Data Flow Chart

The React app is hosted on Netlify, and is using Netlify's CI to build the app from GitHub.

Click here to view the Flow Chart on FlowMapp

Design Breakpoints

• < 40rem (640px at 16px): small
• < 64rem (1024px at 16px): medium
• < 108rem (1728px at 16px): large
• > 108rem: xlarge