Deliverables - Class Assignments

Next.JS App

Due Date

Due before 6:00 pm on Friday November 26, 2021.

Using React plus Next.JS, you will enhance the starter React app to add CRUD functionality and have it running on Netlify.

General Instructions

• Pick a partner in class who is someone that you do not normally work with.
• You will be doing Pairs Programming with this person.
• Tell your instructor who your partner is by posting to the BS LMS discussion board (opens new window).
• Use Next.JS to create your app.
• Use this repo (opens new window) as the starting point for your assignment.
• Here is the live demo of the starter (opens new window)

Feature Requirements

1. Update the /datasource/data.js file to create your own data for the website. Your objects need a minimum of an id plus three other properties. One of those three properties should be an image filename.
2. There will be an image for each of your data objects. Store these images inside /public/images/. We are putting them here to simplify the loading of the images.
3. Update the /styles/theme.js to create your own theme. You can use the default theme or one of the other demo themes and build on top of that to create your theme, or you can just define your own theme entirely yourself.
4. Use the sx props to style all your app elements.
5. Put your data into global state by using the Context API.
6. Your Context object will make the initial fetch call, to the API defined in your /pages/api/ folder, and provide the object to any page that needs access.
7. Provide CRUD features in your app to allow the user to add, edit, and delete items.
8. When doing a Create, Update, or Delete operation, the page should make an appropriate call to your Context object to carry out the operation.
9. The set operation call to your Context object should accept an object that contains an action and the data payload. See below for an example of two objects that could be passed to the Context set method. The function inside your Context object that does the updating of state would use a switch case to look at the action property and then make the appropriate API call. If the API call is successful then the state value (with your data) inside of Context will be updated.

let newState1 = {
  action: 'DELETE',
  payload: { id: 17 },
};
//delete only needs an id (we are assuming our users are authorized)
let newState2 = {
  action: 'UPDATE',
  payload: { id: 43, title: 'Yes is More', author: 'Bjarke Engels' },
};
//update has an id plus values for other props to change
let newState3 = {
  action: 'INSERT',
  payload: { title: 'Shogun', author: 'James Clavell' },
};
//insert has no id

10. Your app should have 4 pages - a Home | Welcome page which that shows a welcome message and explanation of what to do, a list of all page your item titles (possibly with images), a details page that shows all the details plus the image for one item, and a page that lets you add a new item.
11. The ability to delete or edit an item should be contained within the details page.
12. The page structure follows the structure in the /pages/ folder in your NextJS app.
13. All pages should be designed as mobile-first and responsive.
14. Good design practices should be followed. (Accessible colours, alignment, spacing, typographic hierarchy, etc.)

Code management

• Your main branch should be protected through the Github Settings > Branches page.
• All development should be done on a dev branch or a feature branch
• When each feature is complete and ready to merge into the main branch, create a pull request and have your partner review the code and approve the pull request.

Remember

Make frequent commits. They should be atomic and have a meaningfully descriptive message.

Submission

• Create a private repo on GitHub with the name mad9135-c4-react-nest.
• Your pair programming partner should be a collaborator on your repo.
• Deploy the production build to Netlify.
• Refer to the React production deployment guide.
• Invite GitHub user prof3ssorSt3v3 as a collaborator on your private repo.
• Submit both the URL of the GitHub code repo and the Netlify public URL to the bs LMS assignment page.
• Only one partner needs to submit the URL on bs LMS. The other partner should submit the name of their partner who did the submitting.