SkillPies💡 Assignment 1: Welcome Message
Submissions| Name | Progress |
|---|---|
| Introduction | Not Read |
| 🍰 Player | Not Read |
| Name | Progress |
|---|---|
| JSX and Components | Not Read |
| Props | Not Read |
| 👾 Exercise: Props | Not Attempted |
| CSS Styles | Not Read |
| useState and Hooks | Not Read |
| 👾 Exercise: useState | Not Attempted |
| Conditional Rendering | Not Read |
| Lists | Not Read |
| 👾 Exercise: Lists | Not Attempted |
| Forms and Events | Not Read |
| 👾 Exercise: Forms | Not Attempted |
| 💡 Assignment 2: Front End | Not Attempted |
| Name | Progress |
|---|---|
| Pure Components - memo | Not Read |
| Lifecycle - useEffect | Not Read |
| Expensive? - useMemo | Not Read |
| DOM Interactions - useRef | Not Read |
| forwardRef | Not Read |
| useImperativeHandle | Not Read |
| 👾 useImperativeHandle | Not Attempted |
| Context | Not Read |
| useCallback | Not Read |
| useId | Not Read |
| useReducer | Not Read |
| Name | Progress |
|---|---|
| Database | Not Read |
| NextAuth and Github Authentication | Not Read |
| Prisma and ORM | Not Read |
| Project Setup | Not Read |
| Project Authentication | Not Read |
| Name | Progress |
|---|---|
| APIs | Not Read |
| APIs - Slides | Not Attempted |
| Rest APIs | Not Read |
| Rest APIs - Express.js | Not Read |
| ReastAPIs - Next.js | Not Read |
| Securing APIs | Not Read |
| Securing APIs - NextAuth | Not Read |
| Name | Progress |
|---|---|
| tRPC | Not Read |
| tRPC - Routers | Not Read |
| tRPC - Server Rendering | Not Read |
| tRPC - Client Rendering | Not Read |
| Persisting Data | Not Read |
| Assignment 3: APIs | Not Read |
Welcome to your first assignment! We will keep things simple! Your goal is to:
Your result should look as follows:
The downloaded project is a NEXT.js application. Next is a framework for building web application that comes with opinionated project structure supporting routing, client and server rendering and others. We will explore individual features of NEXT.js in this course in due time.
To start, you need to know that NEXT.js uses file system based routing, where each directory represents one segment of your route. In that directory you need to have a page.tsx file, which takes care of rendering the web page. The root of the router is stored in the src/app folder of your project.
For example route
http://localhost:3000/home/profilewould render a page stored in yoursrc/app/home/profile/page.tsxfile.
Since we need to modify the root of our application, we need to modify the src/app/page.tsx file. Currently the file does not contain much:
import styles from "./index.module.css";
export default async function Home() {
return (
<main className={styles.main}>
<div className={styles.container}>
<h1 className={styles.title}></h1>
</div>
</main>
);
}There are the peculiar “
styles.abc” statements in the page code. These statements represent CSS style imports from the CSS file. This technique is called CSS modules (read on!). The benefit of CSS modules are multiple, including that the names of classes are local and do not interfere with other components, eliminating conflicts, or that only the styles that the current content needs is sent to the client, reducing bandwidth and speeding up your website.
When you visit the application in the browser, welcome page will not display anything. So, how do you proceed? The easiest way to see what is expected from you in the assignment, is to run automated tests and to make sure they all pass. In a seperate terminal run the following command:
pnpm testThis will launch the automated unit tests checking for correctness of your solution. Unfortunately, all of your tests fail and you will see the following result:
Please try add “Get Things Done” between h1 tags in your src/app/page.tsx file and save the file.
<h1 className={styles.title}>Get Things Done</h1>You should see that two things have happened:
When you open the src/app/page.test.tsx file, you see that we expect to see “Task 1”, “Task 2” and “Task 3” in the document. This should be understandable from the code below:
it("Show the list of tasks", async function () {
render(
<Suspense>
<Page />
</Suspense>
);
expect(await screen.findByText("Task 1")).toBeInTheDocument();
expect(screen.getByText("Task 2")).toBeInTheDocument();
expect(screen.getByText("Task 3")).toBeInTheDocument();
});Let us finalise the page and provide all three tasks in the unordered list. This is the final source of the src/app/page.tsx:
import styles from "./index.module.css";
export default async function Home() {
return (
<main className={styles.main}>
<div className={styles.container}>
<h1 className={styles.title}>Get Things Done</h1>
<ul>
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
</div>
</main>
);
}When you save your file, you can see that both tests now complete! 🎉🍕🧠🥹 We are almost done. We need to submit our assignment to the classroom.
