In this project, you will be building a podcast website using Next.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.
Your task is to create a podcast site where users can browse a list of podcasts, add new podcasts, edit existing podcasts, and delete podcasts, all from the user interface.
- Use Next.js to create a new project and set up the necessary files and folders.
- Use React components to build the different sections of the web page.
- Apply CSS styles using Next.js's built-in CSS modules or CSS-in-JS libraries.
- Use the provided JSON file as the data source for the podcasts.
- Implement functionality to view the list of podcasts, add new podcasts, edit existing podcasts, and delete podcasts.
- Ensure that the page is responsive and displays correctly on different screen sizes.
- You dont need to store the data on a backend service like firebase.
- Clone the initialized project from the GitHub repository provided to you.
- Analyze the provided JSON file ("podcasts.json") within the project to understand the structure and properties of the podcasts.
- Set up a new Next.js project using the appropriate commands.
- Be sure to use the app-router in Next.js so that the user can see the URL change when they navigate through your site.
- Create React components to represent the different sections of the web page, including the podcast list, add/edit podcast forms, and any other necessary components.
- Use CSS modules or CSS-in-JS libraries to style the components and achieve a visually appealing design.
- Fetch the podcast data from the JSON file and display it on the podcast list page.
- Implement functionality to add new podcasts by creating a form that allows users to input the necessary details.
- Implement functionality to edit existing podcasts by creating a form that pre-fills the fields with the podcast's current data and allows users to update the details.
- Implement functionality to delete podcasts by adding a button or action that removes the podcast from the list.
- Test your web page in different devices to ensure responsiveness.
- Fine-tune the design and functionality as needed.
- Once you're satisfied with your work, push your final code to the GitHub repository along with the JSON file ("podcasts.json") containing the podcast data.
- 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.
The project repository can be found on GitHub: [link-to-github-repo]
The design guidelines can be found in this Figma file. Please refer to the design for guidance on the visual style and layout.
The JSON file containing the mock data for the podcasts ("podcasts.json") will be provided inside the project. It should include information for the different podcasts, such as their titles, descriptions, image URLs, audio URLs, and any additional nested fields.
- Push your final code to the GitHub repository along with the "podcasts.json" file containing the podcast data.
- Provide the link to your GitHub repository as the submission.
The project is due on [deadline date]. Make sure to manage your time effectively to complete the project on time.
You will be evaluated based on the following:
- Accuracy in implementing the required functionality.
- Code organization and cleanliness.
- Properly working routing.
- Proper use of Next.js and React.
- Responsive design.
Good luck, and have fun working on this project!