HappyBlog

Welcome to HappyBlog - your go-to platform for exploring captivating travel stories from around the world! 🌍✈️ Whether you're an avid traveler looking for inspiration or simply love reading about exotic destinations, HappyBlog has something for everyone.

Live Link: Click Here for visit

Overview

HappyBlog is a responsive web application that brings the most enchanting travel stories right to your screen. Our platform offers a seamless experience for both users and administrators, ensuring everyone can enjoy the magic of travel through compelling blog posts.

Features

User Features

• Interactive Blog Feed: Explore our dynamic blog feed with an interactive banner carousel showcasing the latest three posts.
• Thumbnail Grid: Easily navigate through a responsive thumbnail grid displaying the 12 most recent posts.
• Blog Post Page: Dive into detailed blog posts with a responsive layout featuring the title, author, publication date, image banner, and content.
• Shareable Links: Share your favorite posts with friends using unique URLs that include the post ID.

Admin Features

• Admin Dashboard: Access a secure dashboard where you can manage your blog posts.
• Account Management: Register a new admin account and log in securely.
• Create Post: Craft new blog posts with ease, adding titles, content, and images.
• Edit Post: Update existing posts to keep your content fresh and relevant.
• Delete Post: Remove posts that are no longer needed with a simple click.

Project Details

Learning Outcomes

• Project Planning: Develop a comprehensive plan for building a web application.
• UI Design: Design an engaging and intuitive user interface.
• HTML & CSS: Construct a responsive and visually appealing web application interface.
• JavaScript: Enhance interactivity by integrating with API data and adding dynamic UI functionality.
• Testing: Ensure your application functions flawlessly using online tools.
• Deployment: Deploy your web application to a static hosting platform.

Restrictions

• No Frameworks: This project is built using pure HTML, CSS, and JavaScript, without frameworks like Tailwind, Bootstrap, Vue, Svelte, or React.
• Code Attribution: Clearly mark and attribute any borrowed code with inline comments and links to the original source.

Sitemap

The following pages are included in our sitemap for SEO purposes:

• /index.html (Blog Feed Page)
• /post/index.html (Blog Post Public Page)
• /post/edit.html (Blog Post Edit Page)
• /account/login.html (Account Login Page)
• /account/register.html (Account Register Page)

API Integration

HappyBlog interacts with a Noroff API to manage blog content and user authentication. Key API endpoints include:

• GET /blog/posts/<name>
• GET /blog/posts/<name>/<id>
• PUT /blog/posts/<name>/<id>
• POST /blog/posts/<name>/<id>
• DELETE /blog/posts/<name>/<id>
• POST /auth/register
• POST /auth/login

Getting Started

To get started with HappyBlog, follow these steps:

1. Clone the repository using GitHub Desktop.
2. Create a project plan using GitHub Projects.
3. Design wireframes and high fidelity assets using Figma.
4. Implement the user stories as outlined in the brief.
5. Manually test each feature to ensure it works correctly.
6. Deploy the project to a static hosting platform.
7. Validate the HTML and WCAG compliance using online tools.

Conclusion

HappyBlog is a comprehensive platform designed to bring the world's travel stories to your fingertips. We hope you enjoy your journey through our vibrant and engaging content. Happy reading and safe travels! 🌏📚✈️

---

Feel free to explore, contribute, and share your feedback. Let's make HappyBlog the best travel story hub on the web!