🌟 BlueMedix Frontend Developer Role: Case Study Activity 🌟
Time Allotted: 4 Hours
Welcome to the next step in your journey with BlueMedix!🚀 This case study is your opportunity to showcase your frontend
💼✨
development skills, problem-solving approach, and ability to build scalable UI components. We’re excited to see how you tackle
these challenges and bring your best self to the table!
🌊
You will be working on key tasks that reflect real-world frontend development scenarios in [Link]. Each task is designed to test
your technical knowledge, attention to detail, and ability to think critically. Let’s dive in!
Task Details:
1. UI & UX Development 🎨
● Build a user-friendly dashboard with a navigation bar.
● Separate sections for Users and Products.
●
●
Implement a clean and responsive design.
Pro Tip: Focus on intuitive user experience and accessibility! 🎨
2. API Integration & CRUD Operations 🛠️
Use the FakeStore API to perform the following:
User Management: Product Management:
● Fetch and display all users. ● Fetch and display all products.
● Add a new user. ● Add a new product.
● View details of a single user. ● View details of a single product.
● Edit and update a user. ● Edit and update a product.
● Delete a user. ● Delete a product.
Pro Tip: Use Axios or Fetch API for smooth data retrieval and state updates. 🔄
3. Routing Implementation (React Router) 🌍
● Implement React Router for seamless navigation.
● Define the following routes:
○ /users → List of all users
○ /users/:id → User details
○ /products → List of all products
○ /products/:id → Product details
○ /add-user → Form to add a user
○ /add-product → Form to add a product
Pro Tip: Ensure smooth page transitions for an enhanced user experience! ✨
Technical Expectations:
● React Functional Components & Hooks (useState, useEffect, useContext)
● React Router for navigation
● Axios or Fetch API for API requests
● Redux or Context API for state management (optional)
● Form Handling & Validation (Formik or React Hook Form)
● Material UI, Bootstrap, or Tailwind CSS for styling (optional)
Submission and Next Steps:
●
●
Once completed, submit your code via a GitHub repository and share the link with [Link]@[Link].
Be prepared for a 10-minute discussion post-submission to explain your approach, thought process, and deliverables.
📂🤝
Evaluation Criteria:
● ✅ 👨💻
Code quality, structure, and maintainability.
●
● 🎨✨
Accuracy and completeness of API integration.
UI/UX best practices and responsiveness.
●
● 📝
Efficiency in state management and routing.
Problem-solving approach and creativity.
🎉 You’ve got this! 🎉
This is your moment to shine and show us how you can add value to BlueMedix. We believe in your potential and can’t wait to see
🌟
your creativity and expertise in action. Good luck, and remember—every great achievement starts with a single step. Take this one
with confidence!
