[ABRIOL- FULLSTACK ASSESSMENT] Implement blog app with Next.js

[kcthegreat18]

Abriol - Fullstack Asessment - 1-2 Years

Front Page

Blog Posts (app/posts/[id]/)

API Route for all posts (app/api/posts)

API Route for individual posts (app/api/posts/[id])

A end-to-end To-do application with simple TailwindCSS styling, dynamic routing and navigation, and API endpoint development.

Part 1: Home Page (app/page.jsx)

Started with creating a file (data/posts.js) that holds a data object containing the posts to be included in the blog posts. Next is to create page.jsx that imports this data object, and I created a Home component that renders the necessary information from this posts data object. By utilizing posts.map((post) => ()), I am able to individually go through each post in the posts data object to render the information about each post individually. At this point, I did no styling yet.

Part 2: Blog Post Page(app/posts/[id]/page.jsx)

Created a new folder (posts/[id]/page.jsx), in which [id] will be a parameter that will be received by the BlogPostPage component in page.jsx. Named {params} in the component, which is basically the [id] string passed as a parameter in the URL, it is first processed by doing const resolvedParams = await params. Once resolved, we again import the posts data object and iterate through it to look for the specific post with the same id as the parameter passed to the component and render the data about that specific post

Part 3: Posts API route

By creating a folder (api/posts/[id]), we can create a route.js file inside the [id] directory, and a route.js inside just the /posts directory. The former again has a parameter, which is again the id of the post we want. Similar to the individual pages of each blog post, we simply return a JSON containing the information of that specific blog post using return Response.json(post); in a async function with a GET request.

The latter is done similarly, but now it returns a JSON of all posts via return Response.json(posts); in a async function with a GET request.

Part 4: Styling

For the styling, I used TailwindCSS to recreate this look from Figma:

To do this, trial and error was done for the most part, playing around with the class utilities until they look similar to the aforementioned Figma design. Moreover, I experimented by adding new fonts to the design by importing the Pixelify_Sans and Manrope fonts from Google Fonts and adding them to layout.js and the globals.css files.