Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
23 views

Angular Intern Assignment-1

Uploaded by

sankalp09ghosh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views

Angular Intern Assignment-1

Uploaded by

sankalp09ghosh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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