https://github.com/rafaumeu/pocket-front
🚀 InOrbit: Modern goal tracking system built with React + TypeScript + Vite + TailwindCSS. Transform your aspirations into achievements with a sleek, performant, and type-safe application designed for the future. 🎯✨
https://github.com/rafaumeu/pocket-front
developer-tools frontend goal-setting goals-management goals-tracker material-design modern-web performance-optimization personal-development productivity-tools react react-hooks responsive-design tailwindcss time-management typescript typescript-react user-interface vite web-application
Last synced: 2 months ago
JSON representation
🚀 InOrbit: Modern goal tracking system built with React + TypeScript + Vite + TailwindCSS. Transform your aspirations into achievements with a sleek, performant, and type-safe application designed for the future. 🎯✨
- Host: GitHub
- URL: https://github.com/rafaumeu/pocket-front
- Owner: rafaumeu
- Created: 2025-01-17T08:04:00.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-24T00:03:25.000Z (4 months ago)
- Last Synced: 2025-01-26T19:16:53.420Z (4 months ago)
- Topics: developer-tools, frontend, goal-setting, goals-management, goals-tracker, material-design, modern-web, performance-optimization, personal-development, productivity-tools, react, react-hooks, responsive-design, tailwindcss, time-management, typescript, typescript-react, user-interface, vite, web-application
- Language: TypeScript
- Homepage:
- Size: 290 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# InOrbit Frontend
A modern React TypeScript frontend application powered by Vite and TailwindCSS.
[](https://www.typescriptlang.org/)
[](https://reactjs.org/)
[](https://vitejs.dev/)
[](https://tailwindcss.com/)
[](https://www.radix-ui.com/)
---
## 📖 Table of Contents
| [⚡ Tech Stack](#⚡-tech-stack) | [🛠 Development Tools](#🛠-development-tools) | [🚀 Features](#🚀-features) |
|--------------------------------|-----------------------------------------------|----------------------------|
| [📦 Prerequisites](#📦-prerequisites) | [🛠️ Setup](#🛠️-setup) | [📱 Components](#📱-components) |
| [🏗️ Project Structure](#🏗️-project-structure) | [🧪 Running Tests](#🧪-running-tests) | [📚 Documentation](#📚-documentation) |
| [🛡️ License](#🛡️-license) | [🤝 Contributing](#🤝-contributing) | [🔧 Environment Variables](#🔧-environment-variables) |
---
### ⚡ Tech Stack
---
### 🛠 Development Tools
---
## 🚀 Features
- **Modern React**: Built with the latest React features including hooks and functional components
- **Type Safety**: Full TypeScript support for enhanced development experience
- **Fast Development**: Powered by Vite for lightning-fast hot module replacement
- **Responsive Design**: Mobile-first approach using TailwindCSS
- **Developer Experience**: Configured with Biome for consistent code style
- **Form Management**:
- React Hook Form for form state management
- Zod for robust form validation
- **Data Fetching**:
- TanStack Query (React Query) for efficient API integration
- Automatic caching and background updates
- **UI Components**:
- Radix UI primitives for accessible components
- Dialog for goal creation with form validation
- Progress indicators
- Radio group for frequency selection
- Weekly summary display with dayjs formatting
- Pending goals tracking
- **Utility-First CSS**:
- TailwindCSS for styling
- tailwind-merge for class merging
- tailwind-variants for component variants
- **Date Handling**:
- Day.js integration for date formatting in Portuguese
- **Component Library**: Custom component library for consistent UI/UX
- **API Integration**: Implemented with React Query
- **Authentication**: (To be implemented)
- **Testing**: (To be implemented)
---
## 📦 Prerequisites
- Node.js (Latest LTS version)
- Yarn package manager
- Modern web browser
---
## 🛠️ Setup
1. Clone the repository:
```bash
git clone https://github.com/yourusername/pocket-front.git
cd pocket-front
```
2. Install dependencies:
```bash
yarn install
```
3. Set up your environment variables:
```bash
cp .env.example .env
```
4. Start the development server:
```bash
yarn dev
```
---
## 🏗️ Project Structure
```
pocket-front/
├── public/ # Static assets
├── src/
│ ├── assets/ # Project assets (images, fonts, etc.)
│ ├── components/ # Reusable React components
│ │ ├── ui/ # UI components using Radix primitives
│ │ ├── Summary/ # Weekly summary component
│ │ └── PendingGoals/ # Pending goals component
│ ├── styles/ # Global styles and Tailwind configurations
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ └── index.css # Global CSS file
├── tests/ # Test files
├── biome.json # Biome configuration
├── postcss.config.js # PostCSS configuration
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── vite.config.ts # Vite configuration
```
---
## 📱 Components
Currently implemented components:
- Goal Creation Dialog
- Form validation with Zod
- Activity input field with React Hook Form
- Weekly frequency selection with Radio Group
- Save and close functionality
- Weekly Summary
- Date formatting in Portuguese
- List of goals by day
- Summary statistics
- Pending Goals Display
- Dynamic goal tracking
- Status indicators
- Progress Indicators
- Radio Group Selections
---
## 🧪 Running Tests
```bash
yarn test
```
---
## 📚 Documentation
Component documentation and usage examples will be available using Storybook (to be implemented).
---
## 🛡️ License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
## 🤝 Contributing
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'feat: add some amazing feature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
---
## 🔧 Environment Variables
```env
VITE_API_URL=http://localhost:3000
VITE_ENV=development
```
---
Made with ❤️ by Rafael Dias Zendron
### Built with 💜 by Rafael Zendron
[](https://www.linkedin.com/in/rafael-dias-zendron-528290132/)
[](https://github.com/rafaumeu)