For this project, we will be building a single page movie application (SPA). It
will allow users to add, edit, and delete movies, as well as rate them. We will
json-server to mock a
database and our backend, so that we can just worry about the front end and AJAX
source, as well as the
public directory. Whenever changes are detected, the
page will be reloaded. It will also proxy any requests that start with
localhost:3000, which is where json-server is configured run.
json-server is configured to have a delay of 1.2 seconds, so you can see what
your application might actually look like, instead of serving instantaneous
reponses. You can modify this behavior by changing (or removing) the number
-d flag inside of the npm
Fork this repository to your own github account or your github organization.
Clone your fork
npm run devand visit http://localhost:1313/ in your browser. Open up the console and inspect the output.
In general, you should have the development web server (
npm run dev) running
while you are working on the project. You should view your project through
http://localhost:1313, not from IntelliJ's web server, or by dragging the
file(s) into chrome. As you make changes to your source files, all you need to
do is save the file, and the website will be live reloaded.
Take a look at the
src/index.js file to get started. You will notice it has
which you choose to use, you should pick one and use it throughout your code
base, don't mix and match the two.
src/api.js also contains an example api request. You can
reference this to get started building out the parts of your application that
interact with the api.
db.json file contains your "database". You can edit this file directly to
make changes to your data, and this file will be updated if you make api
requests that modify the data.
The server will serve files from the
public directory, meaning any files
public will not be visible. This means if you have any frontend
assets (e.g. bootstrap, or images) they will need to be in the
Your application should:
On page load:
- Display a "loading..." message
- Make an ajax request to get a listing of all the movies
- When the initial ajax request comes back, remove the "loading..." message and replace it with html generated from the json response your code receives
Allow users to add new movies
- Create a form for adding a new movie that has fields for the movie's title and rating
- When the form is submitted, the page should not reload / refresh,
/api/movieswith the information the user put into the form
Allow users to edit existing movies
- Give users the option to edit an existing movie
- A form should be pre-populated with the selected movie's details
- Each movie should have a "delete" button
- Add a
disabledattribute to buttons while their corresponding ajax request is still pending.
- Show a loading animation instead of just text that says "loading..."
- Use modals for the creating and editing movie forms
- Add a
genreproperty to every movie
- Allow users to sort the movies by rating, title, or genre (if you have it)
- Allow users to search through the movies by rating, title, or genre (if you have it)
- The id property of every movie should not be edited by hand. The purpose of
this property is to uniquely identify that particular movie. That is, if we
want to delete or modify an existing movie, we can specify what movie we want
to change by referencing it's id. When a new movie is created (i.e. when you
/api/movieswith a title and a rating), the server will respond with the movie object that was created, including a generated id.
- Take a look at the other branches in this repository, as they have configuration/setup for common scenarios, such as including bootstrap in your application.