Lottify UI assists with providing an interface required to list, search, preview, upload and retrieve lottie files
This is a Next.js project bootstrapped with create-next-app.
This project is a UI for the Lottify API. It provides an interface to list, search, preview, upload and retrieve lottie files. The project is built mainly using Next.js, GraphQl and Tailwind CSS. The project is deployed on Vercel.
Features:
- 📁 List, preview and retrieve lottie files and metadata
- 📱 Progressive Web Application (PWA)
- 📡 Offline-first design
- 📤 Upload lottie files
- 📥 Download lottie files
- 📦 Chunked uploads for large files
- 📱 Responsive design
- 🔍 Search for lottie files
- 🚀 Deployment on Vercel
- 🧹 Linting with ESLint, Typescript and Prettier
DEMO: Lottify UI
To get a local copy up and running follow these simple steps.
- Node.js
- npm
- Clone the repo
git clone https://github.com/shettayyy/lottify-ui- Install NPM packages
npm install- Add the
.envfile that has been shared with you in the root directory and make sure the following environment variables are available:
NEXT_PUBLIC_API_URL=<API_URL>Run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
For production build:
npm run build
npm run startThis is a Progressive Web Application (PWA) that uses the Lottify API to list, search, preview, upload and retrieve lottie files.
I am using next-pwa with Next.js to make this a PWA.
This application is built offline-first where the network requests handled via Apollo Client is cached using apollo3-cache-persist with a localforage wrapper which is smart to pick the right storage solution based on the users browser. The application is designed to work offline and provide a seamless experience to the user.
I have also provided user the option to install the application on their device by providing a prompt to install the application when they visit the application for the first time. The prompt is shown even if the user cancels the prompt on reload. The code to show the prompt after 2 days after cancel has been commented for a better review process.
The user is shown the offline status via toast and the red dot next to app logo on the header using window.navigator.onLine API. We also detect the network status change and show the toast accordingly.
We also provide a fallback UI when the user is offline and the data is not available in the cache.
The user can upload a lottie file by clicking on the upload button on the header. The user can select a file from their device and upload it. The file is uploaded to the server and the user is shown a menu with the progress. The user can then search for the uploaded file and preview it.
I am using react-dropzone to handle the file upload. The file is uploaded to the server using a POST request to the API.
I am performing chunked uploads to the server to handle large files. Files are uploaded to S3 presigned URLs and the server is notified when the upload is complete. The server then processes the file and adds it to the database.
The application is designed to be responsive and work on all devices. I am using Tailwind CSS for styling and have used the utility classes to make the application responsive. The layout is built using flexbox and grid to make the application responsive and mobile-friendly.
The user can search for a lottie file by typing in the search bar. The search is performed on the filename, author, description and user filename of the lottie file. The search input is debounced to reduce the number of requests to the server. You can clear the search by clicking on the clear button on the search bar.
The user can download a lottie file by clicking on the download button on the listed card (top right). The file is downloaded to the user's device.
I am using ESLint, Typescript and Prettier to lint the code. The code is linted on every commit using husky and lint-staged.
This project is deployed on Vercel. The deployment is done automatically when a PR is merged to the main branch.