Съдържание на документа
Exercises: SPA with MVC, REST, Kinvey, ReactJS + Routing
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.
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
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.
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.
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.
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
Home page view for a registered user. Note the header navigation has changed to reflect that.
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).
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:
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:
This will start a local server at port 3000 and automatically open the project in your default browser.