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.
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.
- 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.
- 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.
- 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.
- 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.
- 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)
To get started with the project, follow these steps:
- Clone the repository:
git clone https://github.com/Motormary/FED1-PE1-Motormary- Navigate to the project directory:
cd FED1-PE1-MotormaryTo run the project, simply download the Live Server extension in vscode and click the "Go Live" button.
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.
For any inquiries or feedback, you can reach out to us through the following channels: