Admin Application for Little Fern

This is an admin application built with TypeScript, MongoDB, MongoClient, AWS, Heroku, React, Next.js, Flowbite, Flowbite React, and Tailwind CSS. The application is designed to handle various types of data and provide a user-friendly interface for uploading and managing images for the Little Fern website.

Architecture

The application is built as a full-stack web application with the following components:

Frontend: The frontend of the application is built using React and Next.js. It includes components like Dropzone for uploading images and ImageBlock for displaying and managing images. The UI is designed using Flowbite, Flowbite React, and Tailwind CSS. State management is handled by Zustand 🐻.
Backend: The backend is built with Node.js, using MongoClient to connect to the MongoDB database. User authentication and authorization are handled by ~~AWS Cognito~~ Auth0 by Okta.
Database: MongoDB is used as the database for this application.
Cloud Storage: AWS S3 is used for storing images uploaded through the application.
Content Delivery Network (CDN): AWS CloudFront is used to serve static and dynamic web content.
Deployment: The application is deployed on Heroku.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Node.js
npm

Installing

Clone the repository

git clone https://github.com/rohit1901/admin-little-fern.git

Install NPM packages

npm install

Start the development server

npm run dev

Usage

The application includes several components for handling different types of data:

LoginButton

LoginButton is a component that handles user authentication. It uses AWS Cognito for user authentication and authorization. If the user is already logged in, it renders the LFNavbar and LFSidebar components along with the children components. If the user is not logged in, it renders a sign-in form.

Logo

Logo is a simple component that displays the logo of the application. It uses the next/image component for optimized image rendering.

Dropzone

Dropzone is a component for uploading images. It provides a user-friendly interface for selecting and previewing images before upload. The component uses AWS S3 for storing the uploaded images.

Popover

Popover is a component that displays a popover box. It can be triggered by either hover or click events. The popover box can contain any ReactNode content.

Please refer to the source code for more details about these components.