React Project

App details

The application was bootstraped using Create React App. You can add any aditional libraries like the below:

• React Router - for client-side (browser) routing
• axios - for HTTP requests
• any UI library such as Ant Design, reactstrap or Material UI
• any other global state management tool such as ContextAPI, Redux, react-query, etc.

Fake REST API

The only already installed dependency is the JSON server (development dependency), a "fake" REST API. This API exposes 3 different resourses (stats, courses and instructors) and you can view it on db.json file. We will demonstrate how this API works, but feel free to read the package details and this nice introductory article. For the visual learners there is also a nice quick intro video.

Run locally

You need to have node.js installed. I am using node version 16.18.0 and npm version 8.19.2, but you can use any modern node/npm version you want. When you are ready, you can install all dependencies and run the development servers by typing the below commands:

npm install
npm run api // Runs API server in port 3001
npm start // Runs the create react app server in port 3000
open http://localhost:3000

When you are ready start implementing the below user stories. The screenshots use reactstrap as a UI library (a Bootstrap implementation for React), but feel free to use whichever one you like. Just use the components that make more sence and display the screens / data nicely.

User stories

Dashboard page

The dashbord page must contain:

1. Dashboard stats (beneficiaries, years Running, etc.)
2. a list with the last 5 courses
3. every course must have a link that leads to the course details page
4. a link that leads to the courses page

Dashboard (screenshot)

Courses page

The courses page must contain:

1. all the available courses
2. every course must have a link that leads to the course details page

Courses Page (screenshot)

Course details page

The course details page must contain:

1. all the details of the course
2. a way to edit the current course (link to new page, modal, etc.)
3. a button to delete the current course

Courses Details Page (screenshot)

Add new course page

The add new course page must contain:

1. a form with the appropriate course fields
2. a submit button that posts the data correctly

Add new course page (screenshot)

Extras / Bonus

• Make the site as user-friendly as possible
• Add form (client-side) validations
• Make the site responsive
• Make the site accessible (accessibility)