At Fullstack, we use React for all of our front-end work and you'll be expected to take design specifications and mockups and turn them into working applications.
Below, we'll specify the challenge, describe the functionality, and give you tips and constraints along the way.
Within our blog posts we can embed polls, which are a survey asking users which choice out of a list of items is their best guess or answer to a question.
In each of the images below, the text the blue font style below are notes, not part of the design
Here's what the poll should look like before the user has answered:
And here is the result when the user votes for the answer Bear, (but the Blue Whale answer has the most votes):
Here are additional notes of functionality:
Your challenge: create the above functionality using React (in TypeScript) using this repo as a starting point.
How to attempt this challenge:
- Create a new repo in your Github account and note the git url
- Clone this repo
- Solve the challenge
- Set your new repo as the origin:
git remote set-url origin ${your repo url} - Push your solution to your repo
You must follow these steps for your solution to be accepted -- forks or other methods will not be considered.
- Show a random question from the question list on each page reload
- Do not install any other npm modules
- Components should have their props typed (example)
- Maintain existing code styles (prettier, etc.)
- Any errors or missing features will disqualify the solution
- The questions can be found in
questions.json- we've loaded them for you inindex.tsx - We've started the
Pollcomponent for you inPoll.tsx - When you create new components, you should use
styled-componentsin the same component style asPoll.tsx - The closer your CSS-design looks to the mockup, the better
- BONUS (optional) points for any animations (
poseis included as a dependency if you choose to use it) - BONUS (optional) if it looks good on both Desktop and Mobile