According to the image below, you have multiple cards, a filter, and an add button, and you need to design them accordingly.
- Create a responsive page.
- Create and design the card.
- implement a search filter.
- Implement the "Add new organization" button.
- The page must be neat, clean, and responsive.
- No need for the "Load More" button.
- The "Add new organization" button creates a new card.
- The cards do not need to be edited.
- Use React Material UI framework (https://mui.com/).
- Use SCSS
- Make the design as similar to the image below as possible.
- Send me a git repository or a zip file, whatever works for you.
I used Atomic Design Strucuture as an Architecture. It was more relevant rather than Feature sliced design because of size of the application. Used TypeScript for more control over application and safety. To manage the store, React Context is used with the useReducer hook. This makes applications more independent and lightweight. If the project grows in the future, I will use the Redux Toolkit to simplify development. I tried use more SCSS ( as described in requirments ) as I can but in real project prefer styled components or built in theming MUI.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject
, you can’t go back!