Skip to content

💫 A study project using Next.JS to create a message board

Notifications You must be signed in to change notification settings

kmlyteixeira/message-queue-dashboard

Repository files navigation

✨ Message Queue Dashboard

This project was created w/ to learning more about React using the Next.JS framework.

👀 Overview

image

🔨 Build w/

TypeScript Next JS React Query Styled Components Ant-Design Chart.js

🏃 Installing and Running

You can integrate this project with: kmlyteixeira/message-queue) - or create your own APIs

  1. Clone this repo https://github.com/kmlyteixeira/message-queue-dashboard.git
  2. Run npm install to install the dependencies
  3. Run npm run dev
  4. Open http://localhost:3000 and be happy! :)

Here you'll find:

message-queue-dashboard
|
├── src
│   ├── app
|   |   ├── layout.tsx
|   |   └── page.tsx
|   ├── commons
|   |   └── hooks
|   |       ├── notification/useCustomNotification.ts
|   |       └── search-filter/useSearchFilter.tsx
|   |
|   ├── components
|   |   ├── card/MessageCard.tsx
|   |   ├── chart/MessageChart.tsx
|   |   ├── drawer
|   |   |   ├── hooks/useSendMessage.ts
|   |   |   └── MessageDrawer.tsx
|   |   ├── form/MessageForm.tsx
|   |   ├── grid/MessageGrid.tsx
|   |   ├── layouts
|   |   |   ├── app
|   |   |   |   ├── hooks/useReceiveMessages.ts
|   |   |   |   └── AppPage.tsx
|   |   |   ├── main-header
|   |   |   |   ├── main-toolbar/MainToolbar.tsx
|   |   |   |   ├── notification-popover/NotificationPopover.tsx
|   |   |   |   └── MainHeader.tsx
|   |   |   ├── main-sidebar/MainSidebar.tsx
|   |   |   └── MainLayout.tsx
|   |   ├── AppQueryClientProvider.tsx
|   |   └── StyledComponentsRegistry.tsx
|   |
|   ├── interfaces
|   |   └── message
|   |       ├── MessageBodyType.ts
|   |       └── MessageType.ts
│   └── services
|       └── messages/messages-api.ts
|
├── .eslintrc.json
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── tailwind.config.ts
├── tsconfig.json
└── README.md

📚 Learn more

1️⃣ React Learn

2️⃣ Learn Next.js: Getting Started | Next.js

3️⃣ Ant Design - Components Overview

4️⃣ React for the Haters in 100 Seconds

5️⃣ The React Ecosystem in 2023

6️⃣ How A Small Team of Developers Created React at Facebook | React.js: The Documentary