This repository contains both the client-side and server-side code for a StudentHub application. The application allows you to view existing student records, add new students, and view detailed student information. It is developed using React JS for the frontend and Node JS for the backend.
This application is mainly focused to understand the features offered by Tanstack Query https://tanstack.com/query/latest
- Node.js installed on your system.
- PostgreSQL database installed and running.
- React JS – Frontend library.
- TanStack Query (React Query) – Server state management, caching, and data refetching.
- TanStack Form - Handle form state management.
- Zustand – State management.
- Tailwind CSS – Utility-first CSS framework.
- Express JS – Backend framework.
- CORS – To handle Cross-Origin Resource Sharing.
- pg – PostgreSQL client for Node.js.
- PostgreSQL – Relational database for storing student records.
- Clone the repository:
https://github.com/VengadeshRaj/studenthub-tanstack-eco-system.git
- Install client dependencies:
cd clientnpm install - Install server dependencies:: run
cd ../servernpm i - Setup the database: Run the PostgreSQL scripts to create tables and load some sample records. Path to scripts: server/docs/db_scripts.md
- Update database credentials: Modify the configuration in the server to match your local PostgreSQL setup.
- Start the server:
cd severnpm run start - Start the client:
cd clientnpm run start - Access the application: Open your browser and navigate to http://localhost:3000