⚡Requirements breakdown

[reanimatedmanx]

Overview

Time to complete: 2-3 hours to complete. (NANI?!? 🤷‍♂️)

Objective

This code challenge aims to assess your knowledge and skills in TypeScript, React, RxJS, and MobX following OOP, SOLID paradigms to build a Media Application that can perform CRUD operations on media content.

You will create a React application using the mentioned stack that will interact with a mock API to retrieve and update media content data.

Prerequisites

Paradigms (Requirements)

• OOP
• SOLID

General (Core)

• node
• pnpm

Client (Requirements)

• CRA
• TypeScript
• React
• RxJS
• MobX

API (Optional)

• NestJS
• Prisma
• SQLite

Extra (Documentation)

• Swagger
• Storybook

Requirements:

• Use React with TypeScript for component development.
• Apply OOP principles to your media content model.
• Use MobX for state management.
• Use RxJS to handle asynchronous operations, such as API calls.
• Your code should be clean, maintainable, and well-documented.

Instructions

General

• Initialize workspaces #3
  • client
  • api

API

• Create a barebones mock API using NestJs #4
• Add Prisma to the service #5
• Create a Media Prisma model #6
• Create a sample seed #7
• Add TS path aliases (API) #27
• Add swagger for API documentation #29
• Seed the DB with 1000 records #8
• Create API CRUD endpoints #9
• Make the Media model type field, extendable via an enum table. #31

ℹ️ Note: The API can return other types not only "movie" | "tv-show" | "game"

Client

• Set up the client project #17
• Install rxjs and mobx #18
• Add storybook to the project #25
• Add TS path aliases (Client) #28
• Add to UI env files the address pointing to the API #30
• Create a simple HTTP client wrapper with axios #34
• Implement components #10
  • Implement MediaApplication component #11
  • Implement MediaForm component #2
  • Implement MediaList component #12
  • Implement MediaItem component #13
  • Implement MediaFilterBar component #14
• Call API endpoints using RxJS observables #15

---

• List all media content (movies, TV shows, and games). #19
• Filter media content by type (movie, TV show, or game) and search by title. #20
• Add new media content. #21
• Edit existing media content. #22
• Delete existing media content. #23
• Style the components #16

Deliverables:

• GitHub repository containing the source code for your completed project.
• A README file with instructions on how to set up, run, and test your application.

Evaluation Criteria:

Your homework will be evaluated at technical interview based on the following criteria:

• Code quality, maintainability, and documentation.
• Proper use of TypeScript, React, RxJS, OOP, and MobX.
• Effective communication of your solution in the README file.
• The ability to demonstrate and implement changes during live coding sessions.