This in fairly good shape. All of the UI implented, working according to specs with three exceptions, two moderate, one very small: Ive been working to try and resolve two of these since last night. On balance, its already behind stated schedule and thought it best to get it to you
Three outstanding issues:
State Updates for checked/unchecked todos:
These worked perfectly when all were in one list, without completed/incompleted categories
Fetch/Get/Put are working without error
The problem presents with the filter method I used in to sort completed and not completed todos, received as an array from the useSWR hook in the TodosHome componnent
Passing those into two child list display compnents triggers errors in updates, similar to a race condition with useState.
I believe these errors could originate in my mutate configuration, its my first time using SWR so its hard to know, my understanding is that mutate after fetch should update that data, regardless of which component I call it in.
Persistence for Mock-error message UI is completed, this was more complex than I had anticipated, and had less time than I needed for it. Logic and UI are implemented to toggle display of error message per the specs in the story, under one condition (x button) in the message itself, and two in the form component. but state was an issue here too. I expected this to be straightforward to implement, but persistence was strangely complicated. I started with prop drilling betweent the relevant components, but persistence/toggling was buggy between component updates
I move the state for just the error message to context, wrapping the tne TodosHome component and children, figuring that should persist the state for it correctly, and still had the same issues.
Overall, UI was implemented per specs, SWRfetch/typescript/tailwind were all fine. Some challenges with state that I would chalk up to unfamiliarity and time constraints.
Apologies for the slight delay getting this back to you.
A "To Do App" coding challenge for frontend developers at Sincere.
The starter app is a Next.js template using the built-in
support for TypeScript, ESLint, and Tailwind CSS. The application is configured
to use the legacy Pages Router and data
fetching is expected to use React Hooks with SWR. A
todos
mock API is included and preconfigured using the
MSW mocking library.
Below is an example screenshot and video of the Todos app we will be building.
Watch the example video in examples/todos-example.mp4
.
public/ NextJS static files
src/
components/ React components
hooks/ React hooks
lib/ Common functions and types
mocks/ MSW mock API (no changes expected)
pages/ Next.js pages (Page Router)
styles/ Global CSS styling
Prequisites
- nodejs >= 16.140 (18.16.0 recommended)
- yarn >= 1.22.10
Install
yarn install
Run the local dev server
yarn dev
The application should be running at http://localhost:3000.
In some cases, you may have a port conflict which will be reported in the console. The app will be running on a different port.
The challenge is to create a basic todo application using the starter application codebase. The application should utilize Next.js, TypeScript, functional React components, React Hooks, SWR, and Tailwind CSS. You are expected to complete the list of user stories below.
Your submission will be evaluated on multiple criteria:
- Was it returned on time?
- Did you complete all of the stories?
- Does it work?
- How well is TypeScript utilized?
- Did you use functional components and hooks?
- Did you use
useSWR
andmutate
? - How accurate is the styling to the mocks? Does it look and feel good?
- How well was Tailwind CSS utilized?
- Code quality and organization.
Notes:
- UI mocks are included with each story (in the
examples
directory). While we do not believe in "pixel perfect", please do your best to capture the visual aesthetic. This includes typography, whitespace, color, etc. Everything needed is in the provided Tailwind config and should be replicatable. Do your best! - The API is mocked out in developement using the Mock Service
Worker library. Example functions for interacting with the
API can be found in
src/lib/todos-lib.ts
. You can choose to use these or use your own. It behaves like a regular REST API and you should not need to alter the mocks unless you extend the feature set. - DO NOT USE SSR. The mock API uses LocalStorage for persistence and only works with client-side data fetching.
- A sample hook using
useSWR
is provided insrc/hooks/useTodos.tsx
. We expect interaction with the API to use SWR includinguseSWR
andmutate
. If you are unfamiliar with SWR, please take a minute to familiarize yourself with mutation in the docs. - NO CLASS COMPONENTS. We expect functional components using React Hooks.
- The spec is a suggestion! Feel free to embelish or improve the product as you go. Additional hover states, transistions, etc. are welcome but not required unless explicitly stated in stories.
- The
react-icons
package is installed for icons with a preference to Heroicons 2 - For fonts,
font-sans
andfont-serif
should be enough.
If you are familiar with the tech stack, expect the challenge to take about 2 hours. You are free to spend as much time on the challenge as you would like – we only require that it is returned on time.
To return your code challenge:
- Remove the
node_modules
directory - Archive your project as
.zip
or.tar.gz
file. - Email your archived project to your recruiting contact. You may need to upload your archive to a file sharing service like Dropbox or Google Drive.
- Initialize a git repository and commit your changes incrementally.
NOTE: The example mocks show a clear button inside the input. THIS IS OPTIONAL
-
The new todo should require a title
-
When the form it submitted, the new todo should appear in the Incomplete list
-
The new todo item should be persisted (i.e., it is present after page reload)
-
OPTIONAL There should be a way to easily clear the input.
-
There should be a list of Incomplete todo items including a counter
-
There should be a list of Complete todo items including a counter
-
Incomplete todo items have an empty checkmark
-
I want to click either the circle or the todo text to toggle the status (incomplete/complete).
-
The todo item should move to the appropriate incomplete/complete list when its status changes.
-
There should be visual feedback that the todo is clickable (desktop users). See example video in
examples/todos-example.mp4
- When I mouse over a todo item, I want a delete icon to appear.
- Clicking the delete icon should remove the todo item from the list and persist the change.
- Confirmation is not required.
IMPORTANT! The mock API is configured to throw an error if the title contains
mock-error
- I want to see an error message when there is a problem.
- I want to be able to dismiss the error message.