Scribd
Upload
4 views2 pages

MapperX Case

The task involves creating a GitHub-like card component using Angular and TailwindCSS, with Firebase Authentication for login/logout functionality. The application must be fully responsive for both mobile and desktop devices and will be hosted on Firebase. Requirements include clear code documentation, a README file with setup instructions, and submission of a code repository link and live demo URL.

Uploaded by

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

MapperX Case

The task involves creating a GitHub-like card component using Angular and TailwindCSS, with Firebase Authentication for login/logout functionality. The application must be fully responsive for both mobile and desktop devices and will be hosted on Firebase. Requirements include clear code documentation, a README file with setup instructions, and submission of a code repository link and live demo URL.

Uploaded by

sinemdokmeci
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Front End Developer Task: Implementing a GitHub-like

Card using Angular and TailwindCSS with Firebase


Authentication
Overview
This task involves developing a user interface component that mimics a card on GitHub,
integrating login and logout functionality with Firebase Authentication, all while ensuring
the application is fully responsive on mobile devices and on desktops. Your
implementation should use Angular and TailwindCSS, and the final product will be hosted
on Firebase.

Objectives
Angular and TailwindCSS: Utilize Angular for the framework and TailwindCSS for styling,
focusing on responsive design to ensure a great user experience on both desktop and
mobile.

Implement a GitHub-like Card: Create a card component that is visually similar to the
card found on the link below, ensuring it is fully responsive and optimized for mobile
devices and desktops. Please pay attention to the color changes based on cursor
movement. (It is the card with the text “GitHub Sponsors lets you support your favorite
open source maintainers and projects” on it)

Card Link:
https://github.com/#:~:text=GitHub%20Sponsors%20lets%20you%20support%20your%2
0favorite%20open%20source%20maintainers%20and%20projects.

Firebase Project: Create a Firebase Project and connect it to your Angular Application.

Authentication: Create a login page and a logout button. Use Firebase Authentication for
the functionality.

Hosting on Firebase: Deploy your application on Firebase Hosting.

Requirements
Technical and Design Requirements
Angular: Utilize the latest version of Angular for creating the application's structure and
components.

TailwindCSS: Apply TailwindCSS for styling, with a strong emphasis on responsive design.
Ensure that the application provides an excellent user experience across all device sizes.

Firebase Authentication: Implement Firebase Authentication for managing user login and
logout, ensuring a secure experience.

Firebase Hosting: Deploy the application to Firebase Hosting, making sure it is accessible
online.

Documentation
Code Documentation: Clearly comment your code to explain the rationale behind your
decisions, especially those pertaining to responsive design.

README File: Your README should include instructions for setting up, running, and
deploying the application. Don’t forget to include the link to the code repository.

Submission Guidelines
Code Repository: Submit the link to your code repository (GitHub, GitLab, Bitbucket).

Live Demo: Provide the URL to the live application hosted on Firebase.

Documentation: Your README should guide the reader through installing, running, and
deploying your project, with emphasis on mobile responsiveness.

You might also like