This project will include most of the topics we have learnt so far. This repository includes a basic skeleton with automated tests, use it for you submissions. In this project you will create a Ticket Manager Web Application, with React.js and Express
- Import this repository into your account. Make sure to select the private option
- Clone your new repository to your computer
- Install the project dependencies by running
npm install
from the client folder and the server folder - Create new brunch for your all work (both frontend and backend)
- Change the project to meet the requirements, commit only to your work branch.
- Commit Early, Push Often, your work might be evaluated by your push history
- Once you are done and want to submit, follow the Submitting section
- Good Luck!
We have created automated tests for your convenience, use it to check your progression.
Note that the automated tests rely on your code having the exact class names and Ids as specified below. We encourage you to add your own tests.
- To run the server tests simply run
npm run test
on server folder - To run the client tests make sure you started the development server on port 3000 (via the
npm start
script) and then runnpm run test
from client folder
The Express app should be located in the path server/app.js
and export the app
object (module.exports = app;
).
- The server should run on port
8080
serve the react app onhttp://localhost:8080/
and expose those API endpoints:- [GET] api/tickets - returns an array of tickets from saved in
server/data.json
. If called with query paramsearchText
the API will filter only tickets that have a title including a case-insensitive version of thesearchText
param - [POST] api/tickets/:ticketId/done - Sets
done
property totrue
for the given ticketId - [POST] api/tickets/:ticketId/undone - Sets
done
property tofalse
for the given ticketId
- [GET] api/tickets - returns an array of tickets from saved in
- The app title should be
Tickets Manager
with a custom favicon. You can create one here - The app should load (from backend) and show all Tickets.
- The Ticket component should have className
ticket
and should match this appearance: - App ticket data (received from the server) might contain
label
property (an array of strings). add those tags to the UI using elements having thelable
class. Use the following style as an example: PS: feel free to add more label strings to the data (data.json
) if you need. - The app should have input with id
searchInput
. This input should request the server ononChange
with relevantsearchText
param and update the list accordingly - Add a hide button with className
hideTicketButton
that will hide the tickets from view. Add a counter of number of hiding tickets, this counter should have ahideTicketsCounter
className. - Add a button to restore the hidden ticket list on click with the id
restoreHideTickets
-
Use ESLINT - run
npx eslint --init
in the backend folder & in the client. Use a popular style guide - Airbnb
- New feature - add any cool functionality you want to the app
- Testing that feature - add a test to that new feature
- Add an explanation for this new feature in your PR
- Before submitting, create a gif demoing your app in action using the testing framework by running the command:
$env:RECORD_TEST='true'; npm run test
in your client folder, this will create a gif file of your UI testing. Note, this may take up to 4min to complete - Open a PR from your work branch to the unchanged main branch (remember to include the generated
ui-testing-recording.gif
file) - Invite
Cyber4sPopo
as a collaborator to your repo ๐ฎ - Create a Pull Request from the new brunch into master in your duplicated repository
- Your project will be graded by the number of automatic tests you pass
- Visual creativity, use css to make this app look awesome ๐ ๐ฟ
- Code quality: Variable naming, meaningful comments, logic separation into functions
- Git usage: commit messages, and overall git usage flow