jaxyeh/cm-assignment-react-bkp

Carb Manager Dev React Assignment

Welcome to Carb Manager Dev React Assignment. There is also a Vue version of this assignment. Both assignments are equally scored, feel free to choose one or the other, whichever you feel more comfortable with.

• cm-assignment-vue

Project structure

The project consists of 2 main modules:

• node.js backend:
  • Express server listening on http://127.0.0.1:8080.
  • http://127.0.0.1:8080/recipes - returns recipes list.
  • http://127.0.0.1:8080/recipe/:id - returns a single recipe.
  • http://127.0.0.1:8080/user - returns user settings object.
  • Data for all endpoints is mocked.
  • Feel free to modify all files under the ./server directory except data mocks and corresponding interfaces.
• front-end application:
  • The dev sever listens on http://localhost:3000
  • http://localhost:3000/recipes - renders recipes list
  • http://127.0.0.1:8080/recipe/:id - renders a single recipe
  • Feel free to modify anything

The challenge

The project contains some poor code. The challenge is to identify the bad parts and address the issues.

• Focus only on the RecipesView.jsx component.

• energy values should be converted based on user.units.energy settings.

• energy label should also respect user.units.energy settings.

• Assume that all Recipe.tags and Recipe.nutrients properties are going to be localized based on User.language. Don't develop localization code. Just be prepared for it.

• Assume that all Recipe.nutrients can be displayed in units based on user settings, which differ from the units provided with the recipe data. Don't develop converters, just be prepared for it.

• Assume that this project is a part of a large-scale application. Recipes are used all over the app, they are not just a property of the /recipes page.

• The /recipe/:id page just demonstrates that every recipe will use the same recipe model and will require the same problems to be solved. We don't expect you to write any code for a single recipe view, but we'd like you to have it in mind that such a view will be developed in the future.

• Feel fee to use TypeScript or JavaScript

• Feel free to create as many components/modules as you want

• Feel free to install any library/tool you need

• Feel free to use Redux/Context API

• Feel free to change the project settings (CRA settings, linters, etc)

• Feel free to contact us any time if you have any questions about the assignment!

We're not aiming for perfection. We don't want you to spend too much time on the refactor. If a feature/change you'd like to implement is going take too much time just leave your comments in the Refactor notes section below. Include the reason for the refactor and the proposed solution. Also, document all the changes you made e.g.:

• "Refactored <Button> component props to make it re-usable"
• "TODO: Define custom validators for all <Button> component props"

We suggest you don't spend more than 2h on this challenge.

Refactor notes

• Add TanStack Query library (Automatically handles retries and caching)
• Add global User state through AppProvider and useContext API
• Migrated some JavaScript files to TypeScript (RecipesView.tsx & EnergyItem.tsx), so code is fully typed with interfaces
• Add & pasted Data Types from backend (Since CRA is unable to allow import from out of src folder, out of scope)
• Improved RecipesView.tsx component code using TanStack Query wrapper (better state handling)
• Refactored Energy related computing into a separate EnergyItem.tsx file, useMemo to avoid re-rendering
• Add i18n library for translation along with basic hard-coded translations data
• Improved Error Handling (Fix backend API to properly return 404/500 HTTP Status Code)

Submission

• Clone the repo (don't fork) on your own GitHub account to get started.
• Create a new branch
• Commit all the changes to the new branch
• Create a PR to main when you're done

Customize configuration

This project was set up with create-react-app. See CRA Configuration Reference.

Project Setup

npm install

Run the express server and serve the front-end app for Development

npm run serve

Lint with ESLint

npm run lint