Skip to content

Commit 7bd4f77

Browse files
ibrahimyolbiribrahimyolbir
committed
readme.md
1 parent b51ca92 commit 7bd4f77

File tree

1 file changed

+148
-67
lines changed

1 file changed

+148
-67
lines changed

‎README.md‎

Lines changed: 148 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,149 @@
11
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2-
3-
## Available Scripts
4-
5-
In the project directory, you can run:
6-
7-
### `npm start`
8-
9-
Runs the app in the development mode.<br>
10-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11-
12-
The page will reload if you make edits.<br>
13-
You will also see any lint errors in the console.
14-
15-
### `npm test`
16-
17-
Launches the test runner in the interactive watch mode.<br>
18-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19-
20-
### `npm run build`
21-
22-
Builds the app for production to the `build` folder.<br>
23-
It correctly bundles React in production mode and optimizes the build for the best performance.
24-
25-
The build is minified and the filenames include the hashes.<br>
26-
Your app is ready to be deployed!
27-
28-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29-
30-
### `npm run eject`
31-
32-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33-
34-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35-
36-
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37-
38-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39-
40-
## Learn More
41-
42-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43-
44-
To learn React, check out the [React documentation](https://reactjs.org/).
45-
46-
### Code Splitting
47-
48-
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49-
50-
### Analyzing the Bundle Size
51-
52-
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53-
54-
### Making a Progressive Web App
55-
56-
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57-
58-
### Advanced Configuration
59-
60-
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61-
62-
### Deployment
63-
64-
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65-
66-
### `npm run build` fails to minify
67-
68-
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
2+
# Mandatory Exercise 2 - Advanced
3+
JavaScript with React
4+
The deadline for this exercise is Friday, March 29, 08:59.
5+
For this mandatory exercise you should work on master branch only.
6+
## Preparation
7+
1. Create a new repository on GitHub called mandatory-advanced-js2.
8+
2. Follow the instructions that GitHub gives you; Create a local repository and add a remote
9+
or clone the newly created repository.
10+
## Submission
11+
When you submit the exercise in PingPong, before the deadline, you will enter a link to your
12+
repository, such as:
13+
(https://github.com/mygithubusername/mandatory-advanced-js2)
14+
The teacher will look in the master branch. If any commits are done to the branch after the
15+
deadline, the teacher will look at the last commit before the deadline.
16+
You will get one of the grades G or IG.
17+
## Instructions
18+
In this exercise you will create a movie directory application. The application should be written as
19+
a Single Page Application using React and communicates with a JSON REST API that has been
20+
provided.
21+
# REST API
22+
The REST API is available at
23+
24+
25+
26+
[http://ec2-13-53-132-57.eu-north-1.compute.amazonaws.com:3000/](http://ec2-13-53-132-57.eu-north-1.compute.amazonaws.com:3000/)
27+
28+
The API is used to add, remove, edit and list movie objects. A movie object has the following
29+
structure.
30+
```sh
31+
{
32+
“id”: “99a7d7ba-8660-4011-b98c-c927c5f0d34c”,
33+
“title”: “A title”,
34+
“description”: “A description”,
35+
“director”: “A director”,
36+
“rating”: 3.0,
37+
}
38+
```
39+
40+
The server does some validation on the objects
41+
42+
- The title must be between 1 and 40 characters
43+
- The description must be between 1 and 300 characters
44+
- The name of the director must be between 1 and 40 characters
45+
- The rating must be a number between 0.0 and 5.0
46+
- The id is created by the server and cannot be modified.
47+
- The following operations are supported
48+
49+
#### GET /movies
50+
Returns a list of movies and responds with the status code 200.
51+
52+
#### GET /movies/:id
53+
Returns a movie with a specific id and responds with the status code 200.
54+
55+
Will respond with a 404 status code if a movie with the supplied id does not exist.
56+
57+
#### POST /movies
58+
Adds a new movie. The payload should be a JSON-encoded movie object and the correct
59+
Content-Type header must be used.
60+
61+
Will respond with the status code 400 if the object is invalid. If the object is successfully added it
62+
will respond with the status code 201.
63+
64+
#### PUT /movies/:id
65+
Updates a movie with a specific id. The payload should be a JSON-encoded movie object and the
66+
correct Content-Type header must be used.
67+
68+
Will respond with a 404 status code if a movie with the supplied id does not exist. Will respond
69+
with a 400 status code if the object is invalid.
70+
71+
If the object is successfully updated it will respond with the status code 201.
72+
73+
#### DELETE /movies/:id
74+
Deletes a movie with a specifik id.
75+
76+
Will respond with a 404 status code if a movie with the supplied id does not exist. Will respond
77+
with a 204 status code if the object is successfully deleted.
78+
79+
# Views
80+
The application should contain four views:
81+
82+
- A **“main page”** that shows a table of movies
83+
- An **“add page”** with a form that lets the user add a new movie
84+
- An **“edit page”** with a form that lets the user edit a movie
85+
- A **“details page”** that shows information about a movie
86+
87+
All pages should have a shared navigation with links to the “main page” and the “add page”.
88+
89+
### Main page
90+
This page should display a table with all movies. The number of movies is limited to 20 so
91+
pagination is not necessary.
92+
93+
The table should display the **title, director and rating** for the movies in separate columns. Do not
94+
display the description in this table.
95+
96+
Each row in the table should have three buttons/links
97+
- a button to delete the movie
98+
- a link to the “edit page”
99+
- a link to the “details page”
100+
101+
The main page should contain a text input that can be used to search for movies by title or
102+
director.
103+
104+
The filtering must be done on the client. The API does notsupport filtering.
105+
# Add page
106+
This page is used to add new movies. The page should contain a form with the following inputs
107+
108+
- A text input for title
109+
- A textarea for description
110+
- A text input for director
111+
- A number/range input for rating (some other input like a rating star input is also
112+
acceptable)
113+
114+
When the user submits the form one of two things can happen.
115+
116+
- If there is a validation error or some other error a suitable error message should be
117+
displayed
118+
- If the object is successfully added, the user should be redirected to the “main page”.
119+
# Edit page
120+
This page is used to edit movies. The page should work exactly like the “add page” but the form
121+
should be automatically populated with the current data.
122+
# Details page
123+
This page shows information about a movie. It should display the title, description, director and
124+
rating.
125+
126+
The page should also contain a link to the “edit page”.
127+
# Routing
128+
The application must implement correct routing and should contain at least four routes, one of
129+
every view.
130+
131+
The web browser history and refreshing the page must work correctly.
132+
133+
You must also dynamically change the title when the user navigates to a new page.
134+
# Requirements
135+
- The application should be an SPA written using React
136+
- It should implement correct routing
137+
- It should implement four views
138+
- Main page
139+
- Add page
140+
- Edit page
141+
- Details page
142+
- It should handle errors from the REST API correctly
143+
# Tips
144+
- Use the react-router library for routing. It is very popular and has a great documentation
145+
- Use the react-helmetlibrary to dynamically change the title.
146+
- Try to break the application into smaller, simple parts
147+
- Implement every page as a small application with its own state
148+
- Try to help each other and asks questions if you get stuck
149+
- Good luck!

0 commit comments

Comments
 (0)