https://github.com/aaronksaunders/pocketbase-tanstack-app
https://github.com/aaronksaunders/pocketbase-tanstack-app
authentication crud-application pocketbase tanstack-router
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/aaronksaunders/pocketbase-tanstack-app
- Owner: aaronksaunders
- Created: 2024-11-18T08:12:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-20T05:16:42.000Z (over 1 year ago)
- Last Synced: 2025-01-21T20:11:21.196Z (over 1 year ago)
- Topics: authentication, crud-application, pocketbase, tanstack-router
- Language: TypeScript
- Homepage:
- Size: 13.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Contact Management System
A modern web application for managing contacts with authentication, real-time updates, and a responsive interface.
## Technology Stack
### Frontend
- **React 18** - UI library
- **[TanStack Router v1](https://tanstack.com/router/v1)** - Type-safe routing with built-in search params handling
- **Tailwind CSS** - Utility-first CSS framework
- **TypeScript** - Static typing and enhanced developer experience
### Backend
- **[PocketBase](https://pocketbase.io/)** - Open source backend with:
- Real-time database
- Authentication
- File storage
- Auto-generated APIs
## Features
- 🔐 Secure authentication (login/register)
- 📱 Responsive design
- 📝 CRUD operations for contacts
- 📊 Pagination
- 🔍 Search functionality
- 🚀 Real-time updates
- 🎨 Clean, modern UI
## Getting Started
1. Clone the repository:
```
git clone [your-repo-url]
```
2. Install dependencies:
```
npm install
```
3. Install PocketBase:
- Visit [PocketBase Downloads](https://pocketbase.io/docs/)
- Download the appropriate version for your OS
- Extract the zip file
- Move the `pocketbase` executable to your project root
4. Start PocketBase server:
```
./pocketbase serve
```
- Access PocketBase Admin UI at: http://127.0.0.1:8090/_/
- Create an admin account on first run
- Import the provided schema from `pb_schema.json` (if available)
5. Start the development server:
```
npm run dev
```
## Project Structure
```
├── src/
│ ├── components/ # Reusable UI components
│ ├── routes/ # TanStack Router route definitions
│ ├── lib/ # Utilities and configurations
│ └── types/ # TypeScript type definitions
├── public/ # Static assets
└── pocketbase/ # PocketBase configuration
```
## Environment Variables
Create a `.env` file in the root directory:
```env
VITE_POCKETBASE_URL=http://127.0.0.1:8090
```
## Documentation Links
- [TanStack Router Documentation](https://tanstack.com/router/v1/docs/overview)
- [PocketBase Documentation](https://pocketbase.io/docs/)
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the LICENSE file for details.