The following project is structured similar to a current project, including a sampling of our current programming languages, frameworks, tools and libraries.
The goal of this project is two parts.
1 Provide you a glimpse of how we work and the tools we use
2 Give you an opportunity to showcase your skillsets related to the Frontend role. This project plus reviews of your personal projects will help our team understand your strengths and areas for growth in development
As the Front-End engineer your challenge is to create a working version of a single page web app, matching as closely as possible to the included Figma Design document. The single page web app is meant for use as a dashboard for a content product for small business entrepreneurs.
Instructions:
- Clone a project Repo and make a branch
- Make sure you can view, edit, and build the current project before editing (See info related to NextJS below for help with this)
- Use the project’s folder structure, included diagrams, link to the Figma Design Doc, and your skillz to finish building this Single Page web App
- The data and assets are already in the project or accessible via mock data in project folder
- A portion of the layouts, modules and components are already created and only need updates/edits to match the Figma design. The remaining components in the design will need to be created leveraging the Figma design as a guide.
- ChakraUI is installed but feel free, if you can, to solve the problem with CSS, Another UI Lib, CSS-In-JS, or a similar process
- Focus on Layout and Design for both “Desktop & Mobile” and try and match Figma doc
- Build and test locally then push your branch before the interview
- We will discuss your project during the interview to understand how you tackled problems and your process for creating the page
Please contact me, if you have any questions about the challenge or need any clarifications.
Please contact me!
The best method is via Discord:
My username: drew_beaman#1798
If you are new to Discord:
- Follow this link: Sign up to Discord to set up your discord account
- Once your account is setup, navigate to the friends section and type in my username
drew_beaman#1798
🚨 if your portfolio contains a project that is similar please contact me! 🚨
At the core it's HTML/CSS and Javascript.
We use the javascript library ReactJS
We use the React framework NextJS
We are currently using Chakra-UI for our UI Library. chakra-ui
Figma Design File: FrontEndChallenge
- Clone Repo and make a branch
- Before running application execute "yarn install" then to run application execute "yarn dev"
- Using the App Structure guide Diagram, the projects App structure, and the Figma Design digram to build the necessary Modules, Components, Elements, etc...
- ChakraUI is installed but if you can solve th problem with
CSS,Another UI Lib,CSS-In-JS, or similiar process by all means - Some Modules, and Layouts are already created so you need only edit and style them to match Figma
- The assets and data is already in project or accessible via mock data in project folder
- Focus on Layout and Design for both "Desktop & Mobile"
- test locally
- push your branch before interview and then we can discuss
