Упражнение - Условия

Exam preparation: creating SPA with MVC + routing + ReactJS (CRUD + login / logout) - JS Applications - ноември 2016

 

Материали от темата

Съдържание на документа

Exercises: SPA with MVC, REST, Kinvey, ReactJS + Routing

Problems for exercises and homework for the “JavaScript Applications” course @ SoftUni.

Team Manager

	Create a JS application for managing teams. Use ReactJS for rendering, React Router for routing and Kinvey as a backend provider. Structure your work so that it is easy to manage. The example is styled using Bootstrap.

App Structure

Home Page – show relevant info, depending on the status of the user

Catalog – a list of all registered teams

About – dummy page that would hold information about the app

Register User

Create Team

Edit Team

View Team Details – a detailed page that shows all members of the team and management controls

Create a header that is shared across all pages and place links to the relevant sections in it.

CRUD Operations

The app must support user registration, login and logout. Store the user credential in session storage. Once logged in, the user is free to browse all registered teams and join or create a new team. At any point, the user is able to leave the team he is a member of.

Entity Structure

A team has a name and description that are displayed while browsing. A user has a username. You may create databases and entries as you see fit.

Screenshots

Use this information as a guideline. You may style and structure your solution differently, so long as the required functionality is present.

Home page when the user is logged in and a header, that is shared across all pages.



User registration form



Login form



Home page view for a registered user. Note the header navigation has changed to reflect that.



Team browser.



Create team and edit team forms are identical.


Team details with option to join the team and a list of all current members.



Team management when the user can edit it (when they are the creator).



Example

You can find the completed project here. Note this archive doesn’t include all required libraries, but they are all listed in the package.json file. To rebuild the project and test it, open it inside WebStorm and in the terminal enter:

npm install

This step will take a while (5-10 minutes, depending on the performance of your computer). After it is done installing libraries, again in the terminal enter:

npm start

This will start a local server at port 3000 and automatically open the project in your default browser.