Project Instructions

Overview

In this project, you will be building a personal blog and podcast website using either React, NextJS or HTML,CSS and JS. The website will allow users to view, create, update, and delete podcasts without the need for any backend. You will use the provided JSON file as the data source for the podcasts.

Task

Your task is to create a personal blog and podcast site where users can browse a list of blogs and podcasts, all from the user interface.

Requirements

1. Use Whatever technology you feel comfortable with to create a new project and set up the necessary files and folders.
2. Apply CSS styles using any library that you like ex: tailwingcss, bootstrap...etc
3. Use the provided JSON file as the data source for the blogs and podcasts the file name is db.json.
4. Implement functionality to view the list of blogs, the podcasts should be only listed and you can't do anything else wih them.
5. Ensure that the page is responsive and displays correctly on different screen sizes.

Steps to Follow

1. Fork the project to create your own repository.
2. Clone the initialized project from the GitHub repository provided to you.
3. Analyze the provided JSON file db.json within the project to understand the structure and properties of the object.
4. Set up a new project using the appropriate commands.
5. Use CSS modules or CSS-in-JS libraries to style the components and achieve a visually appealing design.
6. Fetch the podcast data from the JSON file and display it on the website pages. The command to start the server is npm run server
7. Test your web page in different devices to ensure responsiveness.
8. Fine-tune the design and functionality as needed.
9. Once you're satisfied with your work, push your final code to the GitHub repository.

Resources

• Next.js - Official Next.js documentation.
• React - Official React documentation.
• CSS-in-JS libraries like styled-components or Emotion if you choose to use them.
• Tailwindcss - A utility-first CSS framework.
• Bootstrap - A CSS framework.

Figma Design

The design guidelines can be found in this Figma file. Please refer to the design for guidance on the visual style and layout.

JSON Mock Data

The JSON file containing the mock data for the blogs and podcasts db.json will be provided inside the project. It should include information for the different podcasts and blogs, such as their titles, descriptions, image URLs, and any additional nested fields.

Submission

• Push your final code to the GitHub repository.
• Provide the link to your GitHub repository as the submission.

Deadline

The project is due on [14th of August]. Make sure to manage your time effectively to complete the project on time.

Getting Started

First, install the required packages using either npm, yarn, or pnpm:

npm install
# then
npm run server

Open http://localhost:4000 with your browser to see the result and the data.

Instructions

To get this running using Next.js, you can run the following commands:

# This will create the project in a directory called personal-blog
npx create-next-app@latest personal-blog
# After you create the project you cd into it
cd personal-blog
# This will start the development server
npm run dev

To get this running using React:

# This will create the project in a directory called personal-blog
npm create vite@latest personal-blog -- --template react
# After you create the project you cd into it
cd personal-blog
# This will install the dependencies
npm install
# This will start the development server
npm run dev

Grading Criteria

You will be evaluated based on the following:

• Accuracy in implementing the required functionality.
• Code organization and cleanliness.
• Properly working routing.
• Responsive design.

Good luck, and have fun working on this project!