NextJS blog starter project

This is a sample blog starter project to test your ability to learn new skills and apply your existing skills to a NextJS project.

What you need to do

We need you to take this sample project and add some extra features and completely overhaul the visual layout and design of the project to match this design

Key goals and deliverables

• Implementing pagination for the index page of the blog as seen in the design
• Matching the design exactly on desktop.
• Making use of next-image for images that appear on the index page as well as the hero image on the actual blog post page.
• The project will have to be responsive and work well on mobile.
• We will be assessing your final solution by building the project using yarn build and yarn start so make sure your project can be built without any errors.

Bonus deliverable

• Incorporate SSR on the index page in order to show the user a randomised, server generated message.

Dependencies and tools

• You may install any depandencies or tools that may be required.

Submission

In order to submit this assignment you will need clone this project and then push the repo to your own GitHub account. When you are done, submit a link of your public repo to [email protected] (Please do not create a pull-request).

NOTE: Do not remove the Plagiarism declaration.

Plagiarism declaration

1. I know that plagiarism is wrong. Plagiarism is to use another’s work and pretend that it is one’s own.
2. This assignment is my own work.
3. I have not allowed, and will not allow, anyone to copy my work with the intention of passing it off as his or her own work.
4. I acknowledge that copying someone else’s assignment (or part of it) is wrong and declare that my assignments are my own work.

🚀 Quick start

1. Start developing.

   Navigate into your new site’s directory and start it up.

   cd nextjs-blog-starter/
   yarn dev

2. Open the source code and start editing!

   Your site is now running at http://localhost:3000!

   Open the nextjs-blog-starter directory in your code editor of choice and edit pages/index.tsx. Save your changes and the browser will update in real time!