You have been hired to develop a responsive front-end interface for a blogging application that interacts with an existing API. The platform will allow users to browse dynamic blog posts while providing an admin interface for managing content. The application includes features such as a carousel for recent posts, a responsive grid layout for easy navigation, and an intuitive post management system for the blog owner.
This project is for The Mediterranean Dream, a travel-focused blog aimed at inspiring readers to explore the Mediterranean's diverse culture and beauty.
- Name: The Mediterranean Dream
- Sector: Travel
- Size: 1 Blogger
- Location: Preferably somewhere in the Mediterranean, but based in Oslo, Norway
- Mission: To inspire travelers by sharing captivating stories and insights into the Mediterranean’s diverse beauty, culture, and hidden gems. We aim to connect readers with authentic experiences and encourage them to explore the Mediterranean’s unique destinations and traditions.
Homepage Demo:
Admin Demo:
-
Design & Tools:
The user interface was first designed in Figma to ensure a modern, user-friendly experience. For blog post creation and editing, the application integrates the TinyMCE rich text editor, allowing intuitive and flexible content management. -
Blog Feed Page:
Features an interactive banner carousel showcasing the 6 latest posts, with clickable buttons and interactive dots for navigation. Additionally, a responsive grid layout presents the 12 most recent posts, allowing users to search, filter by tags, and easily browse through posts. The grid also includes pagination to view more posts beyond the initial 12. -
Blog Post Public Page:
Provides a responsive layout featuring the post title, author, publication date, banner image, and full content. Each blog post is easily shareable, with URLs containing a query string or hash that includes the post ID. -
Admin Functionality:
A secure login and registration system ensures that only authorized users (the blog owner) can access admin functionalities. The admin has full CRUD (Create, Read, Update, Delete) capabilities, allowing efficient management of blog posts through a validated form and integration with TinyMCE for seamless content creation and editing. -
Accessibility & WCAG Compliance:
The website follows WCAG guidelines with clear labels and error messages for forms, ensuring users can easily understand instructions and correct mistakes. It uses semantic HTML for compatibility with various browsers and assistive technologies like screen readers. The layout is fully responsive, providing an optimized experience across all devices. Accessibility checks, including contrast, are performed using tools like WAVE to ensure the site meets high accessibility standards.
Click one of the links below to launch the project:
🌐 Public View
🔐 Admin View
✍️ Register
- Navigate to the registration page at
/account/register.html. - Complete the registration form.
- Click the "REGISTER" button to create your account.
Note: Registering an account won't display blog posts. To edit, delete, or create posts, you must log in with rikand01864@stud.noroff.no due to endpoint restrictions.
🔑 Login
- Navigate to the login page at
/account/login.html. - Enter your email and password.
- Click the "LOGIN" button.
📝 Create a New Blogpost
- Navigate to
/post/new/index.html - Fill out the form and TinyMCE editor.
- Click "PUBLISH" to create a new post.
- Html, CSS, JavaScript
- Figma
- Noroff Blog API
- Netlify (For deployment)
- TinyMCE
Don’t hesitate to reach out to me or connect with me on social media if you have any questions, collaboration ideas, or an exciting new project in mind. I’m always open to new opportunities!
🩷 Instagram
💙 Linkedin
Permission to use TinyMCE this exam has been graciously granted by Oliver Dipple.