KonstantinosNikopoulos/CodeHub-Project

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
• React Query - for HTTP requests and state management
• any UI library such as Ant Design, reactstrap or Material UI
• any other global state management tool such as ContextAPI, Redux or MobX.

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 12.17 and npm version 6.14.4, 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 where taken after using reactstrap (a Bootstrap implementation for React) UI library, 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. Code.Hub's stats (students, courses, instructors and events)
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 (sample)

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 (sample)

Course details page

The course details page must contain:

1. all the details of the course
2. all the course instructors
3. an edit button that will edit the current course (edit the course inline or in another page)
4. a delete button that will delete the current course

Courses Details Page (sample)

Edit Details (sample)

Delete Course (sample)

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 (sample)

Extras / Bonus

• Add client-side validations
• Use a UI library
• Global state