In this project you will demonstrate your ability to work as a frontend developer with HTML/CSS/JS inside a small Django project.
The project is a simple guestbook application where a user can do 4 things:
- View the latest entries
- View the top (most liked) entries
- Create a new entry
- Like an entry
I've provided the backend code for the project. You're responsible for building the HTML, CSS, and JS required for the UI.
The core of this application is the Entry
model. Any time our we talk about
an Entry
, we mean an object with the following attributes:
id
- A unique identifier for thatEntry
content
- The text content for thatEntry
likes
- The number of likes that theEntry
has receivedcreated_at
- The datetime when theEntry
was created
The backend exposes 6 URLs, but you only really care about 4 of them:
entries/
renders a template namedlatest_entries.html
. The template is provided a variable namedentries
which is an iterable (you can loop over it) ofEntry
objects. Theentries
variable is ordered most recent to least recent. Your page should:- Display the
content
andlikes
for eachEntry
. - Display a link to
entries/new
. - Display a "Like" button that uses
fetch
to make aPOST
request toentries/<int:id>/like
. When the response gets back from the server, update the DOM to reflect the updatedlikes
.
- Display the
entries/top
is exactly the same asentries/
but it uses a template namedtop_entries.html
and the backend orders theentries
variable from most liked to least liked.entries/new
renders a template namedcreate_entry.html
. The template should display a form thatPOST
s toentries/new
with a single input namedcontent
. The input should be atextarea
. The form should not allow the user to submit an emptytextarea
.entries/<int:id>/like
does not render a template because it is an API endpoint. It expects aPOST
request with an empty body. It will add 1 to the likes of theEntry
identified by theid
provided in the path. It responds with a JSON object with a single property,likes
. It contains an updated value for the number of likes for the specifiedEntry
.
Roughly, your job is use the backend to make sure that the user can do the 4 things listed at the top of this document:
- View the latest entries
- View the top (most liked) entries
- Create a new entry
- Like an entry
Of course, checking those boxes is only part of the work. You should make sure:
- Your UI is designed with a user in mind. Just because it is technically possible doesn't mean that it is pleasant for a human being.
- Your code is written with readers in mind. You might not work on this code after submission, but an employer might read it.
- HTML/CSS Basics (content covered in the static site benchmark)
- HTML Form Basics
- Django Template Language
- JS Basics
- DOM Manipulation
- Responding to Events in JS
- Using
fetch
andPromise
s in JS
After setting up your repository you need to set up the database by running the following command:
$ python3 manage.py migrate
After this you can start the server and get to work!
$ python3 manage.py runserver
- All work due by the 4:30 PM Friday October 18.
- You should push at least 1 commit per workday.