README em português

Cats List

Cats List is just an app that shows how to use some AWS tools. (see video)

Tools used in this project

Turborepo to manage this project as a monorepo

Backend

• API Gateway to expose a REST API
• Lambda to receive and process requests from API Gateway
• DynamoDB to store app data
• S3 to store app images
• Cognito** to handle authentication
• Serverless Framework to provision and orchestrate the services mentioned above

All AWS services above are available on free tier

Frontend

• React
• TailwindCSS to beautify React components
• Formik and Yup to handle app forms
• HeadlessUI to build common UI components like popover, combobox and modal

Tests

Soon Jest and Cypress tests will be added. Feel free to fork it and add test cases if you are interested in practicing tests.

Configuring backend

Before you follow the steps below you need to create an account on the AWS platform

1. Create an administrative user (see video)

2. Create an access key (see video)

3. Create a .env file on /backend folder with the following variables

   AWS_ACCESS_KEY_ID=place_access_key_here
   AWS_SECRET_ACCESS_KEY=place_secret_access_key_here
   REGION=us-east-1
   

4. Install dependencies and build backend

      yarn && yarn build --scope=backend
   

5. Run yarn sls:deploy to provision/start all AWS services configured in /backend/serverless.yml

6. Wait for yarn sls:deploy to complete and check if all services were created:

   6.1 API Gateway routes

   6.2 Lambda functions

   6.3 DynamoDB tables

   6.4 S3 bucket

   6.5 Cognito user pool

7. If step 6 was successful navigate to API Gateway dashboard and follow the steps below:

   7.1 Click on an API called react-aws

   7.2 Click on a link on the left sidebar containing "API:react-aws..."

   7.3 Search for a section called Stages for react-aws

   7.4 Copy Invoke URL, paste it into your browser, and add /breeds at the end.

   7.5 Navigate to the URL to see cat breeds. And that`s it, your REST API is working.

Configuring frontend

1. Create a .env.local file on /frontend folder with the following variables

   VITE_API_BASE=place_invoke_url_here
   

Starting the project

yarn && yarn dev