Scribd
Upload
16 views

Angular Intern Assignment-1

Uploaded by

sankalp09ghosh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

Angular Intern Assignment-1

Uploaded by

sankalp09ghosh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Angular Intern Assignment

Objective:
To evaluate the candidate’s ability to develop a professional and interactive
UI using Angular by replicating the provided UI/UX design.

Project Overview:
The candidate is required to create a homepage for an event management
platform based on the provided UI/UX design: Adobe XD Design
(https://xd.adobe.com/view/9dff03f9-adb1-40aa-85ae-27ff8adef07e-c8ac/).

The UI should feel professional, with modern aesthetics, and it should offer a
smooth, interactive user experience.

Requirements:

1. Project Setup:
- Set up an Angular project using Angular CLI.
- Ensure the project structure follows best practices, including the use of
modules, components, and services.

2. Core Features to Implement:


- Header: Create a navigation bar with the menu items and logo as seen
in the design.
- Hero Section: Implement a full-width hero section with the background
image, headline text, and call-to-action buttons.
- Event Cards: Display a grid of event cards. Each card should contain an
event image, title, date, location, and a “Book Now” button. Hover
animations and interactive effects should be implemented for a professional
feel.
- Search Bar: Implement a functional search bar that filters the events by
name as the user types.
- Footer: Add a footer with links, contact information, and social media
icons.

3. UI/UX Design:
- The overall look and feel should match the design provided in the Adobe
XD link.
- Ensure the interface is responsive and works well on both desktop and
mobile devices.
- Use animations, hover effects, and transitions to make the experience
smooth and interactive.

4. Bonus Points (Optional):


- Implement a carousel in the hero section.
- Add form validation for a potential login or sign-up section.
- Use Angular Material or a similar UI library to enhance the design and
improve consistency.

5. Documentation:
- Include a README file with:
- Instructions on how to set up and run the project.
- A description of the features implemented.
- Screenshots of the UI at different breakpoints (desktop, tablet, mobile).
- Provide a link to the GitHub repository where the project is hosted.

6. Submission:
- Upload the completed project to a public GitHub repository.
- Ensure the repository is well-documented, with proper commit messages.
- Share the GitHub URL for evaluation.

Evaluation Criteria:
- Code Quality: Clean, modular, and maintainable code, with proper use of
components and services.
- Design Accuracy: How closely the final implementation matches the
provided UI/UX design.
- Responsiveness: The app should be responsive and functional across
different devices and screen sizes.
- Interactive Features: Smooth animations, transitions, and interactive
elements that contribute to a professional user experience.
- Documentation: Clear documentation and screenshots included in the
README file.

You might also like