Upwards: Habit Tracking Application

Upwards is your go-to tool for tracking your habits effectively. This intuitive application empowers you to seamlessly record your progress for existing habits or add new ones. Built with TypeScript, Next.js, Ant Design, MongoDB Atlas via Mongoose, and React, Upwards offers a responsive, cross-platform user experience tailored to your habit-building journey.

Features:

1. Habit Management: Effortlessly record progress for your existing habits or add new ones for enhanced productivity and personal growth.

2. Add, Edit, and Delete Habits: Easily add, modify, or remove habits to adapt to your evolving goals and lifestyle.

3. Progress Tracking: Monitor your progress with a simple scoring system—"+" for positive progress and "-" for negative progress—on each habit card.

Learnings:

• Effective State Management (React Hooks): Leveraged React hooks such as useState and useRef for efficient state management, enabling dynamic updates and interactions within components while keeping the codebase concise and readable.

• Data Integration with MongoDB: Implemented seamless data storage and retrieval using MongoDB Atlas via Mongoose, gaining insights into working with NoSQL databases and effectively managing data persistence for the application.

• Server-Side Logic with Next.js: Utilized Next.js API routes for server-side logic, enhancing performance and flexibility by offloading heavy computation and data processing tasks to the server, resulting in a smoother user experience.

• Responsive Design with Ant Design: Employed Ant Design components and layout for a responsive and user-friendly interface, learning best practices for building visually appealing and accessible web applications that adapt seamlessly to different screen sizes and devices.

• Deployment Process with Vercel: Leveraged Vercel's seamless deployment process for efficient production deployment, gaining insights into automating deployment workflows and ensuring scalability and reliability of the application in a production environment.

Technology Stack:

• Frontend: Developed with React and Ant Design for a modern and user-friendly interface.

• State Management: Utilizes React hooks like useState and useRef for efficient state management.

• Data Handling: Integrated with MongoDB Atlas via Mongoose for seamless data storage and retrieval.

• Server-Side Logic: Built API routes with Next.js for handling requests and routing.

Development and Deployment:

• Local Development: Run npm run dev to start a local development server accessible at http://localhost:3000/.

• Building: Use npm run build to create optimized production-ready build artifacts.

• Deployment: Leverage Vercel's seamless deployment process for scalable and reliable production deployment.

How to Use:

1. Record Progress: Click the "+" or "-" buttons on each habit card to record positive or negative progress.

2. Add New Habits: Easily add new habits by clicking the "Add Habit" button and filling out the necessary details.

3. Edit or Delete Habits: Modify or remove existing habits by clicking the edit or delete buttons on each habit card.

Get Started:

1. Clone the Repository: Clone the Upwards repository to your local machine.

2. Install Dependencies: Run npm install to install the required dependencies.

3. Set Up Environment Variables: Create a .env.local file and set the necessary environment variables, including the MongoDB connection string.

4. Run Locally: Start the development server with npm run dev and access the app at http://localhost:3000/.

5. Deploy: Deploy your app to production using Vercel or your preferred hosting platform for wider accessibility.