https://github.com/aitmil/crm-truscape
CRM for practice Next.js & TailwindCSS
https://github.com/aitmil/crm-truscape
nextjs tailwind-css tanstack-react-query typescript
Last synced: about 2 months ago
JSON representation
CRM for practice Next.js & TailwindCSS
- Host: GitHub
- URL: https://github.com/aitmil/crm-truscape
- Owner: aitmil
- Created: 2024-10-13T19:57:11.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-10T15:10:53.000Z (over 1 year ago)
- Last Synced: 2025-10-30T13:40:40.321Z (8 months ago)
- Topics: nextjs, tailwind-css, tanstack-react-query, typescript
- Language: TypeScript
- Homepage: https://crm-truscape-xi.vercel.app
- Size: 834 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Learn Next.js & TailwindCSS - CRM Project
This is a small CRM project built for practicing **Next.js** and **TailwindCSS**. The project demonstrates a simple implementation of a CRM system with features such as adding, editing, and managing companies. It leverages **TanStack React Query** for server state management and emphasizes routing and data fetching practices.
## Features
- **Next.js**: Server-side rendering, routing, and API routes.
- **TailwindCSS**: Rapidly building responsive, modern UI components.
- **TanStack React Query**: Efficient data fetching, caching, and server state management.
- **Dynamic Routing**: Implemented with Next.js file-based routing.
- **Reusable Components**: Modular components for scalability.
- **Formik**: Simplified form handling and validation.
## Live Demo
👉 [CRM Dashboard](https://crm-truscape-xi.vercel.app/dashboard)
## Key Features Practiced
1. **TanStack React Query**:
- Used for efficient server-state management.
- Enabled caching, synchronization, and optimized server requests.
2. **Dynamic Routing**:
- Practiced Next.js dynamic routing with parameterized routes ([id]).
- Leveraged scoped folder-based routes like (admin) for admin-specific functionality and (.) for default or shared routes.
- Organized routes for better scalability, as demonstrated in the project structure.
3. **Fetching Data**:
- Used custom fetch logic and TanStack React Query for API calls.
- Demonstrated fetching categories, countries, and companies data.
4. **Form Handling**:
- Leveraged Formik for creating forms with validation and integration into the CRM workflow.
5. **Component Reusability**:
- Built modular and reusable components.
## Technologies Used
- **Frontend**: React, Next.js, TailwindCSS
- **Backend**: [mockapi](https://mockapi.io/)
- **State Management**: TanStack React Query
- **Forms**: Formik
- **UI Components**: TailwindCSS
## Future Improvements
1. **Authentication & Authorization**:
- Add user authentication and role-based access control.
2. **Database Integration**:
- Integrate a database like MongoDB or PostgreSQL for persistent data storage.
3. **Advanced Filtering & Sorting**:
- Implement advanced filtering, sorting, and pagination for better data management.
4. **Enhanced UI/UX**:
- Improve the user interface with animations and increased responsiveness.
5. **Testing**:
- Add testing with tools like Jest and React Testing Library to ensure code reliability.