Junior Frontend Engineers (Beginner)
Simple React Component
Create a React component that displays a list of items.
Problem Description:
In this exercise, you will create a simple React component that displays a list of items passed to it as props. The goal is to practice how React works with components and props, and to gain familiarity with the basics of JSX. This task will help cement your understanding of component-based architecture in React.
Checklist:
- Set up a basic React project using Create React App
- Create a functional React component
- Pass a list of items to your component as props
- Display the list of items within your component using JSX
- Style your component using CSS
Junior Backend Engineers (Beginner)
Basic Authentication
Implement Basic Authentication for an Express API.
Problem Description:
In this exercise, you will enhance your Express API by implementing Basic Authentication. This will involve adding middleware that checks the Authorization header of incoming requests and verifies credentials. This task will help you understand authentication mechanisms and middleware in Express.js.
Checklist:
- Set up a basic Express API if you don’t already have one
- Create middleware to parse the
Authorizationheader - Verify credentials against a known username and password
- Restrict access to protected routes based on authentication
- Return appropriate status codes and messages for unauthorized requests
Senior Frontend Engineers (Intermediate)
Unit Testing
Write unit tests for React components using Jest and React Testing Library.
Problem Description:
In this exercise, you will write unit tests for a set of React components using Jest and React Testing Library. The goal is to ensure your components behave as expected under various conditions. This task will help you understand how to write effective tests and ensure the robustness of your application.
Checklist:
- Set up Jest and React Testing Library in your React project
- Write unit tests for your components’ rendering logic
- Test different states and props of the components
- Mock external dependencies, if any
- Ensure high test coverage for your components
Senior Backend Engineers (Intermediate)
Advanced Authentication
Implement OAuth 2.0 authentication using Passport.js.
Problem Description:
In this exercise, you will implement OAuth 2.0 authentication in an Express application using Passport.js. You will configure an OAuth2 strategy to authenticate users with a third-party provider like Google or GitHub. This task will help you understand OAuth 2.0 flows and how to secure an application using third-party authentication.
Checklist:
- Set up Passport.js in your Express project
- Configure OAuth2 strategy for a third-party provider
- Implement the authentication routes and callback handling
- Secure your API endpoints with OAuth2 authenticated sessions
- Handle user sessions securely and manage user data
Staff Frontend Engineers (Advanced)
State Machines
Implement a complex UI state management using XState in a React application.
Problem Description:
Checklist:
Staff Backend Engineers (Advanced)
Advanced Caching Strategies
Implement advanced caching strategies (e.g., cache invalidation, distributed caching).
Problem Description:
Checklist:
We hope you find these problems challenging and rewarding. Stay tuned for the next issue, where we’ll tackle more intriguing problems to help you hone your skills. Happy coding!
Sincerely,