Build-your-own-life-goals workshop

Instructions

1. Type the command npx create-react-app --template @tymate/cra-template-lifegoals if you haven’t done so already.
2. Create your own GitHub repo. Make it public, and initialize without README, .gitignore or licence file.
3. Try getting your fake API by going to https://my-json-server.typicode.com/my-username/my-repo where my-username/my-repo represents the GitHub URI of you repo.
4. Your App.js file is ready to be read, your mission is explained there, or below.
5. Don’t forget to edit this README so that it explains your approch & process.

Launching the app

yarn dev

This command will launch the React App as well as the API on port 3001.

Deploying

1. Add homepage to package.json

"homepage": "https://my-username.github.io/my-repo",

yarn deploy

Troubleshooting: GitHub Pages deployment en create-react-app.dev

The mission:

We would like you to create your own life goals app. You will be able to get access to a fake API, located at https://my-json-server.typicode.com/my-username/my-repo/goals.

The app should consist of three pages:

• A homepage, /, containing the list of you life goals.
• A goal details page, /:goalId, displaying your life goals in more details. What changes between the homepage and the details page is up to you, but we suggest thinking about truncating or hiding the goals description on the homepage.
• An admin page, /admin, where you will be able to create, update and delete you life goals. We would like the title, description and imageUrl (consider using Unsplash?) to be mandatory. We would like the completion field to act as checkbox as well as date reference.

Tools

This repo comes with the following libraries installed:

• UI library: Chakra
• Routing: react-router-dom v6
• Forms: Formik
• Form errors handling: Yup
• Icons: react-icons
• Requests: React Query

Good luck!

If you want to react out for help, questions or clarifications, we are on twitter, TymateEng