Responsive Web Application Development
Budget: ₹600 – ₹1,500 INR
Assignment Title: Building a Responsive Single-Page Web Application with Animated
User Interface
Objective:
T o evaluate your ability to develop a functional, responsive web application with clean,
beautiful animations and a user-friendly interface within a short timeframe.
Assignment Description:
Develop a single-page web application called "EventSpot Lite" where users can discover
local events happening around them. Focus on creating a visually appealing interface with
smooth animations, ensuring the application is responsive across devices.
Requirements:
Technology Stack:
● Frontend: Use a frontend framework like React, Angular or Vue.js
● Backend: Not required for this assignment. Use mock data instead.
● APIs: Optional. If you choose to use an external API, ensure it's free and doesn't
require extensive setup.
Core Features:
1. Event Listing Page:
○ Display a list of events with details like event name, date, and location.
○ Use mock data to populate the events.
○ Implement search functionality to filter events by name or location.
2. Event Details Modal:
○ When an event is clicked, display more details in a modal window.
○ Include event description and an image.
3. Responsive Design:
○ Ensure the application looks good on desktop, tablet, and mobile devices.
○ T est the page on different devices or use responsive design tools.
4. User Interface and Animations:
○ Clean and Intuitive Design:
■ Create a modern UI with a focus on simplicity and usability.
○ Smooth Animations:
■ Implement animations such as:
■ Hover Effects: Subtle animations on buttons and event cards.
■ Modal Transitions: Smooth fade-in and fade-out effects when
the modal opens and closes.
■ Loading Indicators: If necessary, show a loading spinner
during data fetching (even if simulated).
○ Visual Feedback:
■ Provide feedback on user interactions, like button clicks.
5. Performance Optimization:
○ Optimize images and assets for quick loading times.
○ Minimize the use of heavy libraries unless necessary.
6. Code Quality:
○ Write clean, well-organized, and commented code.
○ Use meaningful variable and function names.
○ Follow best practices for your chosen technologies.
Evaluation Criteria:
● Functionality:
○ The application meets the core feature requirements and functions without
errors.
● User Interface:
○ The UI is visually appealing, intuitive, and consistent.
● Animations:
○ Animations are smooth, enhance the user experience, and are appropriately
used.
● Responsiveness:
○ The application displays correctly on different screen sizes and devices.
● Hosting and Accessibility:
○ The application is successfully hosted and accessible via the provided link.
● Code Quality:
○ Code is clean, well-organized, and follows best practices.
Submission Guidelines for EventSpotLite Assignment
1. Repository:
○ Upload your code to a GitHub (or similar) repository.
○ Grant access to the repository.
○ Naming Convention: Name your repository as
FirstName_LastName_EventSpotLite.
2. Hosted Application:
○ Deploy your application on a free hosting service.
○ Provide the public URL to access the application.
3. Documentation:
○ Include a README file with setup instructions.
4. Deadline:
○ Submit by October 28th, 2024, at 12:00 am.
5. Submission Format:
○ Do not reply all to this email.
○ Send only one email with the GitHub link and the hosted application URL in
the format:
mathematica
Copy code
GitHub Repository Link: [Your GitHub Link]
○ Hosted Application URL: [Your Application URL]
Additional Notes:
● Data Use:
○ Use mock data (JSON files or hardcoded data) to simulate event listings.
● Third-Party Libraries:
○ You may use libraries for animations (e.g., CSS libraries like Animate.css) to
save time.
Inspirational Visual References:
● Event Listing Page:
○ Description: A clean page displaying event cards in a grid or list format.
Each card shows the event name, date, and location. Cards have hover
effects that slightly enlarge or highlight the card.
● Event Details Modal:
○ Description: Clicking on an event card opens a modal with additional details.
The modal fades in over the current page, and can be closed by clicking an
'X' button or outside the modal area.
● Navigation Bar:
○ Description: A simple, fixed navigation bar at the top with the application
name and a search bar. On mobile devices, the navigation collapses into a
menu icon.
User Interface
Objective:
T o evaluate your ability to develop a functional, responsive web application with clean,
beautiful animations and a user-friendly interface within a short timeframe.
Assignment Description:
Develop a single-page web application called "EventSpot Lite" where users can discover
local events happening around them. Focus on creating a visually appealing interface with
smooth animations, ensuring the application is responsive across devices.
Requirements:
Technology Stack:
● Frontend: Use a frontend framework like React, Angular or Vue.js
● Backend: Not required for this assignment. Use mock data instead.
● APIs: Optional. If you choose to use an external API, ensure it's free and doesn't
require extensive setup.
Core Features:
1. Event Listing Page:
○ Display a list of events with details like event name, date, and location.
○ Use mock data to populate the events.
○ Implement search functionality to filter events by name or location.
2. Event Details Modal:
○ When an event is clicked, display more details in a modal window.
○ Include event description and an image.
3. Responsive Design:
○ Ensure the application looks good on desktop, tablet, and mobile devices.
○ T est the page on different devices or use responsive design tools.
4. User Interface and Animations:
○ Clean and Intuitive Design:
■ Create a modern UI with a focus on simplicity and usability.
○ Smooth Animations:
■ Implement animations such as:
■ Hover Effects: Subtle animations on buttons and event cards.
■ Modal Transitions: Smooth fade-in and fade-out effects when
the modal opens and closes.
■ Loading Indicators: If necessary, show a loading spinner
during data fetching (even if simulated).
○ Visual Feedback:
■ Provide feedback on user interactions, like button clicks.
5. Performance Optimization:
○ Optimize images and assets for quick loading times.
○ Minimize the use of heavy libraries unless necessary.
6. Code Quality:
○ Write clean, well-organized, and commented code.
○ Use meaningful variable and function names.
○ Follow best practices for your chosen technologies.
Evaluation Criteria:
● Functionality:
○ The application meets the core feature requirements and functions without
errors.
● User Interface:
○ The UI is visually appealing, intuitive, and consistent.
● Animations:
○ Animations are smooth, enhance the user experience, and are appropriately
used.
● Responsiveness:
○ The application displays correctly on different screen sizes and devices.
● Hosting and Accessibility:
○ The application is successfully hosted and accessible via the provided link.
● Code Quality:
○ Code is clean, well-organized, and follows best practices.
Submission Guidelines for EventSpotLite Assignment
1. Repository:
○ Upload your code to a GitHub (or similar) repository.
○ Grant access to the repository.
○ Naming Convention: Name your repository as
FirstName_LastName_EventSpotLite.
2. Hosted Application:
○ Deploy your application on a free hosting service.
○ Provide the public URL to access the application.
3. Documentation:
○ Include a README file with setup instructions.
4. Deadline:
○ Submit by October 28th, 2024, at 12:00 am.
5. Submission Format:
○ Do not reply all to this email.
○ Send only one email with the GitHub link and the hosted application URL in
the format:
mathematica
Copy code
GitHub Repository Link: [Your GitHub Link]
○ Hosted Application URL: [Your Application URL]
Additional Notes:
● Data Use:
○ Use mock data (JSON files or hardcoded data) to simulate event listings.
● Third-Party Libraries:
○ You may use libraries for animations (e.g., CSS libraries like Animate.css) to
save time.
Inspirational Visual References:
● Event Listing Page:
○ Description: A clean page displaying event cards in a grid or list format.
Each card shows the event name, date, and location. Cards have hover
effects that slightly enlarge or highlight the card.
● Event Details Modal:
○ Description: Clicking on an event card opens a modal with additional details.
The modal fades in over the current page, and can be closed by clicking an
'X' button or outside the modal area.
● Navigation Bar:
○ Description: A simple, fixed navigation bar at the top with the application
name and a search bar. On mobile devices, the navigation collapses into a
menu icon.