Skip to content

bogdantarasenko/lottiefiles-client

Repository files navigation

Lottie Files Management Application Client

A client application for managing Lottie animation files, built with Next.js, NextAuth, Chakra UI, Apollo GraphQL, React Hook Form, and localForage.

Table of Contents

Project Overview

This application is designed for the seamless management of Lottie animation files. By harnessing the power of Next.js, NextAuth, Chakra UI, Apollo GraphQL, React Hook Form, and localForage, it delivers a high-performance, scalable, and accessible platform.

Design Decisions

Frontend Framework: Next.js

Next.js offers a comprehensive solution for React-based applications, supporting server-side rendering and static site generation, which enhances SEO and improves load times.

Authentication: NextAuth

For secure authentication, NextAuth provides a straightforward and flexible solution, integrating easily with Next.js for social login, email, and more.

UI Component Library: Chakra UI

Chakra UI is chosen for its simple, modular, and accessible component library, which accelerates the development process and ensures a responsive and attractive design.

Form Handling: React Hook Form

React Hook Form is utilized for efficient, flexible form management, offering easy integration with Chakra UI components while improving performance and user experience.

Client-Side Storage: localForage

To enhance offline capabilities and store data efficiently on the client side, localForage is used for its asynchronous storage API, which is more powerful and flexible than localStorage.

Features and Functionalities

  • Search/Browse Files: Users can easily search for and browse Lottie animations, leveraging advanced filtering and sorting capabilities.
  • File Upload: Secure and simple file upload functionality, with drag-and-drop support.
  • File Management: Users can download, delete, and manage their animations with intuitive interfaces.
  • Responsive Design: Fully responsive design ensures a seamless experience across all devices.

Getting Started

Prerequisites

  • Node.js (LTS version)
  • A modern browser

User credentials for online demo:

email: [email protected] password: [email protected]

email: [email protected] password: [email protected]

Installation

To set up the project locally, follow these steps:

git clone https://github.com/bogdantarasenko/lottietest-client
cd lottietest-client
npm install
npm run dev

About

Next.js / Graphql Apollo: test task for lottiefiles

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published