Punch Group Assessment

Click here to visit application

This project was completed to prove that I am a good fit for the position of MERN Stack Developer at Punch Group.

The assessment was about building a smooth landing page

I developed the landing page using the following core libraries and technologies:

1. Vite 5+ as development environment
2. React 18+
3. Typescript 5+
4. Redux Toolkit for state management
5. Styled-components and TailwindCSS for styling
6. React icons to get needed icons

This app is a single-page web application that transits a landing page design into React app, React + Vite + Typescript

To run the project:

Take the following steps to run the project and explore basic features implemented:

1. Get Project locally: To get the code locally on your machine, you'll need to clone or fork the project's repository. To do this,

• Go to the project's repository
• Copy the https urls on GitHub or fork the repo to have a copy of it in your own GitHub account then copy its https urls.
• Go to your VSCode terminal
• Locate the folder you'd like to keep the project. If for example you want to have the project in desktop then you can change directory to desktop by running cd desktop
• Then run, git clone <https url copied>. This will make the project available on your machine, for example, the project will be in the desktop folder
• You can then go to the desktop folder and look for Punch-assessment folder, then open it with your VSCode or any of your preferred IDE

2. Install all dependencies: For the project to run without error, you need to at least install all dependencies used for the project using the command, npm install

To easily know most features implemented and the programming skills showcased, I will briefly list some and important ones of them:

1. Modular programming: I made sure I divided components into small chunks where necessary. With this approach, I was able to easily reuse components accordingly.

2. Folder structure: Although, it was a small and simple project, I still kept in mind that this could be a big project. Hence, I maintained simple folder structure that can easily be navigated through.

3. Total responsiveness: The application is totally responsive on any screen dimensions you can think of.

4. Image Optimization: Although there are many images in the design that could be used; images that are icons, background linear gradients, slant containers, I still made sure I only used images where they unavoidably necessary. This means that some icons remained as icons and NOT downloaded as images, all slant containers were developed and NOT used as background images, all linear gradient gradients were also developed. This was done because I know the implication of having a lot of images on a page, it mostly causes latency.

5. Handling Responsiveness: Although other screen sizes (like tablet and mobile) designs were not provided, I was still able to imagine a good fitting development for these screens

6. Great attention to details: Gave attention to every details in the design. Other than strictly following the colors provided by the design, I also strictly followed the typography and layouts provided and most importantly used the Switzer font family as used in the design.