Lottie Room

This project allows Lottie users to play with some animation settings, see and discuss changes made by any room visitor in the realtime.

It was done for Lottie Files' assessment for the Senior Front-end Engineer role.

Live demo

https://lottie-room-frontend.vercel.app/

Core technologies

Frontend

• React
• Vite
• TypeScript
• Zustand
• Radash
• Tanstack Query
• TailwindCSS

Backend

• Fastify
• WebSockets via Fastify Websocket
• TypeScript
• Apollo GraphQL Client
• Prisma
• PostgreSQL
• Radash

Additional information

It took around 20 hours to build the project and 5 to deploy (yeah, I know)

Todos:

• Support for editing gradients
• Support for selecting shapes
• Timestamps to socket events
• History for JSON changes
• Some kind of authentication
• Display outlines for selected/hovered layers/shapes
• Optimize socket event sending query