ICS 314 Fall 2024

E54: Digits, Part 6 (Clean up)

For this experience, you will clean up and “publish” a home page for the application at GitHub.

Merge your notes branch into main

At the conclusion of the last WOD, your notes enhancement was in a branch called notes-1 (and notes-2).

Quit Next.js if it is running.

Now switch to the main branch in GitHub Desktop, and merge one of your notes branches into it. Push your main branch to GitHub after the merge completes.

Start nextjs using npm run dev, and check http://localhost:3000 (and the console) to ensure that the merge worked correctly.

The WOD

This is not a timed WOD. Instead, carry out the following tasks. You only have to do this once.

Pro Tip: run your app within the Terminal window in VSCode, and keep Chrome Dev Tools open during development.

1. Create a branch to hold your work.

Create a branch called “cleanup” in which to work on this task.

2. Remove any ESLint errors.

Quit Next.js, then run npm run lint. If there are any ESLint problems in your code, fix them.

3. Remove all the “stuff”.

  1. Go through all the src/ subdirectories, and delete all files referring to “Stuff”. Include the comments.
  2. Also remove the model Stuff from prisma/schema.prisma.
  3. Run npx prisma migrate dev --name cleanup to update the database schema.
  4. Don’t forget to delete the defaultData field in settings.development.json!
  5. Update prisma/seed.ts to remove adding stuff to the database.

After you think all Stuff related code is gone, do a dropdb <digits-db-name> followed by createdb <digits-db-name>. Then npx prisma seed db to seed the database. Then run npm run dev if you got everything. Login as john@foo.com and list his contacts. If there are no errors on startup or in the console, you should be fine.

4. Create a project home page.

Edit the index.md file. Your index.md should start with a screenshot of the landing page of your application, then provide installation instructions, then provide a walkthrough of the pages in your application and what they do. Your screenshot files can be stored in the doc/ directory.

To display a screenshot, store the screenshot file in the doc/ directory. Then, you can display the screenshot by putting an img HTML element in your index.md file. For example, to display a screenshot stored in the file doc/landing.png, put this in index.md:

<img src="doc/landing.png">

Commit an initial version of your cleaned up site to the main branch.

5. Publish the project home page.

Go to the GitHub page for your digits app, and click on “Settings”, then scroll down to the section called “GitHub Pages”. It will say that the repo is private but the published site will be public. This is OK. Select the main branch, then click the Save button.

Now scroll back down to the GitHub pages section, and click the “Choose a theme” button. Select any theme that you want.

Your GitHub page should be available within a few seconds.

Here is the GitHub Page I created for my old Digits Meteor application: https://ics-software-engineering.github.io/digits-semantic-ui. Yours can be very similar to this, since you’ve created the same application!

Submission instructions

By the time and date indicated in Laulima, submit this assignment via Laulima.

Your submission should contain a link to the GitHub Page you created to document the final user interface to your application.

You should also provide a URL to the GitHub repo so that the TA can check that you have written the index.md file correctly.

You must now grant read access to this repo to the TA for your section. To do this: