Welcome to the Frontend Coding Challenge! This is an opportunity for you to showcase your skills in creating a web application using React, TypeScript, and RestfulAPIs.
This repository contains a Vite React TypeScript application as the frontend and a mock RestfulAPI server to simulate a backend. The goal of this task is to create a simple Customer Relationship Management (CRM) Dashboard that displays customer information and their corresponding orders.
- Node.js
- Yarn package manager
-
Clone the repository:
git clone git@github.com:dentolize/dentolize-coding-challenge-frontend-restapi.git
cd dentolize-coding-challenge-frontend-restapi
-
Install the required dependencies:
yarn install
-
Start the development servers:
yarn dev
-
Open a browser and visit:
- React application: http://localhost:3000
- JSON Server API Mock: http://localhost:4000
In this task, you will be creating a CRM Dashboard with the following features:
- Display a list of customers on the main page. Each customer entry should include the customer's name, email, and phone number.
-
When a user clicks on a customer in the list, navigate to a separate page that displays the selected customer's details.
-
On the customer details page, display the customer's name, email, phone number, and a list of their orders.
-
For each order, display the order number, order date, and order status.
- Implement routing using react-router. The application should have two routes:
/
Displays the customer list./customer/:id
Displays the details of a specific customer based on their id./customer/new
Displays a form to add a new customer.
-
Create a form that allows users to add new customers. The form should collect the following information:
- First Name
- Last Name
- Phone Number
-
Validate the form input to ensure that all fields are filled and the email format is correct.
-
When the form is submitted, send an API request to add the new customer to the db.json file.
-
Style your application using styled-components. Ensure that the design is clean and user-friendly.
-
Make sure your application is responsive, and it looks good on both desktop and mobile devices.
-
Write clean, readable, and well-organized code. Use appropriate naming conventions and code comments.
-
Handle errors gracefully and provide helpful feedback to users when something goes wrong.
Once you've completed the task, create a pull request on this repository with your changes. Include any necessary documentation or explanations in the pull request description.
We will evaluate your submission based on the following criteria:
- Code quality and readability
- Adherence to best practices
- User interface design and responsiveness
- Proper use of API requests
- Error handling and validation
- Completion of the task requirements
We're excited to see what you come up with. Good luck!