FED1 Project Exam 1

Overview

HotView Labs is a leading tech research and development company, dedicated to providing the most accurate and up-to-date insights to tech leaders worldwide. Our new responsive blog interface will allow users to access dynamic blog posts, while also providing a robust admin interface for managing content.

Description

This project involves designing and building a responsive front-end interface for an existing blogging API. The application will include both public-facing pages for users to view and interact with blog posts, and admin pages for authorized users to manage content. Key features include:

• An interactive blog feed page with a carousel of the latest posts and a grid of the most recent 12 posts.
• Detailed blog post pages with shareable URLs.
• Admin pages for login, registration, and post management.

Features

Blog Feed Page

• Interactive Banner Carousel: Users can view and navigate through the latest three blog posts, with smooth transitions and clickable buttons to view full posts.
• Post Grid: A responsive grid displaying the latest 12 blog posts, each clickable to navigate to the full post.
• Pagination: Users can navigate through multiple pages of blog posts beyond the initial 12.
• Sorting & Filtering: Users can sort posts by date, popularity, or category and filter them based on tags or categories.
• Search Functionality: Users can search for specific posts using keywords.

Blog Post Public Page

• Responsive Layout: Displays post title, author, publication date, image banner, and content.
• Shareable URL: Each post has a unique, shareable URL containing the post ID.

Blog Post Edit Page

• Restricted Access: Accessible only to logged-in admin users.
• Edit & Delete: Admins can edit post details or delete posts.
• Form Validation: Ensure all edits are validated before submission.

Account Management Pages

• Login Page: Allows users to log in with email and password, saving a token for session management.
• Register Page: Allows admin to create a new user with name, email, and password.

Built With

• HTML
• CSS
• JavaScript
• Figma (for style guide and wireframes)
• GitHub (for version control and project hosting)
• GitHub Pages (for deployment)
• GitHub Projects (for project management)

Getting Started

Installing

To get started with the project, follow these steps:

1. Clone the repository:

git clone https://github.com/Motormary/FED1-PE1-Motormary

1. Navigate to the project directory:

cd FED1-PE1-Motormary

Running

To run the project, simply download the Live Server extension in vscode and click the "Go Live" button.

Contributing

We welcome contributions to the project! If you would like to contribute, please follow these steps:

• Fork the repository.
• Create a new branch for your feature or bug fix.
• Commit your changes and push the branch to your fork.
• Open a pull request to the main repository with a description of your changes.

Contact

For any inquiries or feedback, you can reach out to us through the following channels:

• My Github Page
• [email protected]