https://github.com/kalisankevin/crms
A simple dashboard using Next.js that displays website visit statistics and customer data from a CRM system
https://github.com/kalisankevin/crms
chadcnui crm firebase material-ui mockaroo-api nextjs react-query recharts tailwindcss tailwindui typescript
Last synced: 4 months ago
JSON representation
A simple dashboard using Next.js that displays website visit statistics and customer data from a CRM system
- Host: GitHub
- URL: https://github.com/kalisankevin/crms
- Owner: kalisaNkevin
- Created: 2024-10-17T19:49:33.000Z (over 1 year ago)
- Default Branch: staging
- Last Pushed: 2024-10-22T08:55:18.000Z (over 1 year ago)
- Last Synced: 2024-10-23T02:55:47.779Z (over 1 year ago)
- Topics: chadcnui, crm, firebase, material-ui, mockaroo-api, nextjs, react-query, recharts, tailwindcss, tailwindui, typescript
- Language: TypeScript
- Homepage:
- Size: 1.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### CRMS Frontend Interview
## Project Overview
This project is a simple Next.js web application that fetches and visualizes website visit data and customer data from a CRM. It demonstrates the ability to work with data, APIs, and modern frontend development tools while ensuring performance and user experience.
## Features
- **Landing Page**: Displays aggregated data for total visitors, bounce rate, and average session duration.
- **Detailed Visit Analysis**: Provides a graph showing trends for website visits over the past 30 days using Chart.js.
- **CRM Data List**: Displays customer data with pagination and a search bar to filter the list of customers by name or email.
## Technical Requirements
- **Next.js Framework**: Used for server-side rendering and fast performance.
- **Data Fetching**: Uses Next.js API routes or `getServerSideProps` to fetch data from the Mockaroo API.
## Setup Instructions
### Prerequisites
- **Node.js**: Make sure you have Node.js installed on your local machine. You can download it from [nodejs.org](https://nodejs.org/).
- **npm or yarn**: Ensure you have one of these package managers installed. npm comes with Node.js, and you can install yarn by following the instructions on [yarnpkg.com](https://yarnpkg.com/).
- **mockaroo** : Make sure you have an account on Mockaroo you use your own api keys to fetch the fake data. you can create on from [here](https://mockaroo.com)
### Installation
1. Clone the repository:
```bash
git clone git@github.com:kalisaNkevin/crms.git
cd CRMS
```
2. Add .env.local file in the file directory:
```bash
Refer your self from the .ENV.EXAMPLE to use your own keys.
```
3. Build the schema according to this reference here :
### Install dependencies
1. In your terminal execute the following command depending on your package manager :
```bash
npm install
# or
yarn install
```
### Running the Project
1. In your terminal execute the following command depending on your package manager :
```bash
npm run dev
# or
yarn dev
```
2. Your application will be available at .
### License
This project is licensed under the MIT License. See the [LICENSE](https://www.mit.edu/~amini/LICENSE.md) file for details.
## Author
This project was initiated by [Kalisa Ngabo Kevin](kalisangabokevin.me). You can reach out to me at [kalisangabokevin@gmail.com](kalisangabokevin@gmail.com) or visit my GitHub profile at [https://github.com/kalisaNkevin](https://github.com/kalisaNkevin).