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.
- 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.
- Next.js Framework: Used for server-side rendering and fast performance.
- Data Fetching: Uses Next.js API routes or
getServerSidePropsto fetch data from the Mockaroo API.
- Node.js: Make sure you have Node.js installed on your local machine. You can download it from 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.
- 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
- Clone the repository:
git clone git@github.com:kalisaNkevin/crms.git cd CRMS - Add .env.local file in the file directory:
Refer your self from the .ENV.EXAMPLE to use your own keys.
- Build the schema according to this reference here :
- In your terminal execute the following command depending on your package manager :
npm install
# or
yarn install- In your terminal execute the following command depending on your package manager :
npm run dev
# or
yarn dev- Your application will be available at http://localhost:3000.
This project is licensed under the MIT License. See the LICENSE file for details.
This project was initiated by Kalisa Ngabo Kevin. You can reach out to me at kalisangabokevin@gmail.com or visit my GitHub profile at https://github.com/kalisaNkevin.