Hemensan-Mahilange-Frontend-Developer Tailwind Templates

Hemensan Mahilange Frontend Developer

Matrix-Lab Assignment

MERN Developer Technical Assignment

Overview

This assignment involves implementing a web application based on a provided Figma design, which includes animations. The primary objective is to build a functional and visually appealing application using React and other relevant libraries.

Assignment Instructions

Figma Design

  1. Access and Review: Access the Figma design using (Link). Familiarize yourself with the layout, styling, components, interactions, and animations.
  2. Also, allow users to connect their wallet to the website. Use the wallet connect tool (LINK) for it

Video Reference

  1. Animation Understanding: Watch the animation reference (Link here) to grasp the expected transition animation between different weather states.(refer to animation content may differ here)

Backend Development

  1. Simple Backend: Develop a simple backend for the Our Token section using Node.js and Express.
  2. Data Structure: Use the provided JSON data format for the backend.
[
  {
    img: "http://example.com/img1.jpg",
    tokenName: "AlphaToken",
    symbol: "ALP",
    decimals: 18,
    marketcap: 1000000,
    chain: "Ethereum",
  },
    {//..other data}
];

Tools & Technology

Must-Have

  • React
  • Next.js (optional but adds value)

Good to Have

  • Tailwind CSS
  • TypeScript (optional but adds value)

Must Avoid

  • jQuery
  • Minimize library usage and leverage native tools as much as possible.

Evaluation Criteria

  • Effective use of React hooks and component hierarchy.
  • UX/UI design implementation fidelity.
  • Integration and smoothness of animations.
  • Application performance and responsiveness.
  • Code quality, including formatting, linting, commits, and PR descriptions.

Submission Guidelines

  1. GitHub Repository: Upload your project to a public GitHub repository. Name it <Your Name> - Frontend Developer.
  2. Commit and PR Practices: Ensure proper commit messages and PR descriptions.
  3. Demonstration Video: Include a URL in your PR description showcasing the app's functionality.
  4. Hosting: Share your project's PR/Branch link (hosted on Vercel/Netlify).

Deadline

  • Please submit the assignment before 19 January 2024, 11:59 PM. ( Early submission will be valued ).

Good luck with your assignment, and have fun! 👍

Top categories

Loading Svelte Themes