Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/apollo-level2-web-dev/l2-b1-assignment-9-frontend


https://github.com/apollo-level2-web-dev/l2-b1-assignment-9-frontend

Last synced: 24 days ago
JSON representation

Awesome Lists containing this project

README 

        
# Frontend Development for a Dynamic Platform



## Introduction



Welcome to the Frontend Development assignment with a strong emphasis on responsive design for a dynamic platform! In this project, your primary goal is to create the user interface (UI) and frontend functionality for a versatile platform that accommodates various types of content or services. An essential aspect of this assignment is to ensure that the platform is responsive, providing an optimal user experience across various devices and screen sizes.



## Assignment Requirements



- **From the if applicable list, you must do minimum 10 among of them.**



### User-Facing Features



### Homepage



- Design a visually appealing and informative homepage that adapts seamlessly to different screen sizes.



**Home page content:**



- Navigation Menu

- Search Bar

- Featured Content/Services

- Testimonials/Reviews

- About Us/Platform Description

- Images and Visuals

- Detailed Footer menu

- Two unique sections



I**nteractivity (minimum 2 section):**



1. Smooth Scrolling

2. Testimonials/Reviews Carousel

3. About Us/Platform Description Reveal ( On mouse hover or click show animated card or detailed view)

4. Scroll-to-Top Button

5. Loading Spinner



### Content or Service Listings



- Create a dedicated page where users can explore content or services with a focus on responsive design. Implement filters and sorting options that work well on both large screens and mobile devices.



**Content or Service listing page:**



- Content/Service Cards

- Filter and Sorting Options

- Search Bar

- Pagination (frontend pagination)

- Content/Service Details Link

- Quick Actions

- Rating and Reviews

- Availability Status ( if applicable)

- Sorting and Filtering Sidebar

- Breadcrumb Navigation

- Advanced Filters (optional)

- Content/Service Tags

- Pricing Information

- User-generated Content

- Search Results Summary



### Detail Pages



- Develop detailed pages for the content or services that present information, pricing (if applicable), and user reviews in a responsive manner. Ensure that images and content adjust appropriately to various screen sizes.



**Detail page:**



- Title

- Description

- Images or Gallery

- Pricing (if applicable)

- Availability Information (if applicable)

- Location or Address (if relevant)

- Contact Information (if applicable)

- User Reviews and Ratings(if applicable)

- Related Content/Services

- Booking or Reservation Options

- Share Buttons

- Call-to-Action Buttons

- Additional Details

- User-generated Content



### Interaction and Booking (if applicable)



- Implement responsive interaction features related to the specific content or services offered on the platform. This could include booking, reservations, purchasing, or any other relevant interactions.



**Interaction Page:**



- Booking Form

- Date and Time Selection (if applicable)

- Availability Calendar (if applicable)

- Pricing Information (if applicable)

- Booking Confirmation (if applicable)

- User Details and Contact Information

- Payment Options (if applicable)

- Cancellation Policy

- Add to Cart or Reserve Now Button

- Availability Status (if applicable)

- Additional Options

- Review and Edit Booking (if needed)



### User Registration and Login



- Design registration and login forms that are user-friendly and work smoothly on mobile devices. Ensure that error messages and validation are clear on smaller screens.



**User Registration & Login page:**



- Registration Form

- Login Form

- User Profile Picture (if applicable)

- Username or Email Field

- Password Field

- Social Media Login Options (if applicable)

- Sign-Up Button

- Sign-In Button

- Error Messages for Validation

- Terms and Conditions Checkbox

- Privacy Policy Link

- Redirect to User Profile (after login)



### User Profile



- Create responsive user profiles that allow users to manage personal information, contact details, history (e.g., purchase history or content interactions), and user-generated content (if applicable).



**User Profile page:**



- User Profile Picture (if applicable)

- User Information

- Profile Settings

- Purchase or Booking or Content or Service Interactions History

- Payment Methods (only UI)

- Edit Profile Button

- Logout Button



### Notifications (Optional)



- If you choose to include this feature, create a responsive notifications center that delivers messages and updates effectively on various devices.



### Feedback Forms



- Design feedback forms that adapt to different screen sizes, making it convenient for users to provide comments and suggestions regardless of their device.



**Feedback Page:**



- Feedback Form

- Fields for User's Name and Email

- Rating Scale

- Comments or Suggestions Box

- Submit Button

- Clear Form Button

- Thank You Message



### Dashboard for Users



### User Dashboard



- Create a responsive dashboard that provides users with an overview of their interactions, bookings (if applicable), notifications, and user-related statistics. Ensure that the dashboard elements adapt well to various screen sizes.



**User Dashboard page:**



- Overview of User's Activities

- Booking History

- Current Booking Status

- User Profile Summary

- Edit Profile Button

- Notifications Center

- Quick Actions



### Dashboard for Admins



### Admin Dashboard



- Develop a responsive admin dashboard that allows administrators to monitor and manage website activities. Provide features for user management, service management, booking management, content management, and profile management.



**Admin dashboard page:**



- Overview of Platform Activities and Statistics

- User Management Section

- Content or Service Management Section

- Booking , Content Management Section ( make any part of the webpage dynamically )

- User profile summary

- Notifications Center(optional)

- Quick Links to Common Actions



### Enhancements for User Experience and Responsive Design (Bonus)



- Bonus marks for enhancing the user experience, with a specific focus on responsive design. Prioritize making the platform accessible and user-friendly on desktop, tablet, and mobile devices. Consider factors such as touch-friendly elements, adaptive layouts, and efficient use of screen real estate.



### Technical Requirements



1. Utilize appropriate technologies for frontend development to ensure efficient server-side rendering and enhanced SEO capabilities (if applicable).

2. Implement robust data validation and error handling mechanisms on the responsive frontend.

3. Thoroughly test and debug the responsive design across various devices and screen sizes to ensure consistency.



## Additional Notes



- The assignment is adaptable to various types of content or services, making it suitable for a wide range of platforms.

- Responsive design is a critical aspect of this assignment. Ensure that the platform offers a consistent and user-friendly experience across different devices.

- You can choose any suitable authentication platform (e.g., NextAuth.js , Passport.js, Firebase) for implementing user registration and login.

- Ensure that all functionalities work perfectly, whether you create your own data, set up a simple server, or use dummy data.



## Assignment Submission



Your final submission should include the following:



1. Source code (provide a GitHub Repository link for the responsive frontend developed).

2. A live site link that allows reviewers to interact with the responsive frontend of the dynamic platform on both desktop and mobile devices.

3. A recorded video (2-5 minutes) showcasing the key features and functionalities of your responsive frontend developed. ( any screen video recorder application or chrome extension.



[Chrome Web Store](https://chromewebstore.google.com/search/screen%20recorder) or https://chromewebstore.google.com/detail/loom-%E2%80%93-screen-recorder-sc/liecbddmkiiihnedobmlmillhodjkdmb )



[ Note: Must submit your complete website. Incomplete assignments will not be accepted. ]