DartPath

Project Overview

DartPath is a project aimed at creating a user-friendly platform where students can draft, post, and share their D-plans (academic course schedules) in a visually appealing and interactive manner. The site allows users to explore others' D-plans based on filters such as year or major, fostering a community of shared academic experiences and planning insights. This app was developed as part of the Women in Science Project (WISP) in collaboration with the DALI Lab at Dartmouth College.

Key Learning Experiences

• Building Full-Stack Applications: Working on DartPath, I gained hands-on experience in full-stack development, using React for the front-end and Firebase for the back-end. This project was my first time working with a full-stack web app, and it was an eye-opening experience in building dynamic, scalable web applications.

• State Management: One of my key learning moments was working with Zustand for state management. I faced a steep learning curve but eventually became comfortable managing complex state, ensuring seamless data flow across components. Zustand helped me manage application-wide state effectively, enabling smooth updates and interactions in the app.

• Real-Time Data Handling: Integrating Firebase Firestore was a crucial part of this project. It allowed me to implement real-time data synchronization, meaning updates in the database were instantly reflected on the frontend. This was particularly important for features like managing friend requests and profiles in real-time, which enhanced the overall user experience.

• User Authentication: Firebase Authentication was used for managing user accounts. This gave me hands-on experience in setting up secure logins, handling user sessions, and safeguarding user data. It was an essential part of ensuring personalized experiences for users in DartPath.

• Team Collaboration: Working within a collaborative team helped me improve my ability to communicate and work effectively with other developers. From sharing tasks to submitting pull requests and handling merge conflicts, I learned best practices for using Git in a collaborative environment. We worked together to integrate different parts of the app, such as friend interactions, profiles, and requests.

Challenges & Solutions

• Transition to Full-Stack Development: This project marked my transition into full-stack development, a step away from my prior experience with languages like Python, Java, and C. At first, working with React and Firebase was challenging, especially in terms of understanding their component-based structure and integrating them. However, I overcame these hurdles by working through the concepts of hooks, state management, and asynchronous functions, ultimately gaining confidence in full-stack development.

• Asynchronous Functions and State Management: Working with asynchronous functions for fetching data and ensuring smooth updates was a major learning curve. I used Zustand to manage application-wide state, which helped synchronize changes across multiple components. Initially, structuring state management was difficult, but with practice, I learned to optimize it for smoother data flow and interaction handling.

• Firebase Integration: Integrating Firebase for user authentication and database interactions was another challenge. Initially, I struggled with maintaining a consistent database structure, but as I got more familiar with Firebase functions, I was able to handle real-time updates and CRUD operations more efficiently. The biggest lesson here was understanding how Firebase can handle both frontend and backend tasks, streamlining the development process.

• Styling and UI Design: Ensuring the app was visually appealing and responsive was one of the toughest parts. Managing CSS and making the design consistent across all pages took a lot of time. I learned that using component libraries or CSS frameworks like Tailwind could have sped up the styling process and improved consistency.

• Development Environment Challenges: Switching from a Windows setup to macOS early in the project caused configuration issues. This slowed down my progress, but it taught me the importance of managing development environments and troubleshooting cross-platform issues.

Improvements and Future Plans

• Code Cleanliness: Looking back, I see areas for improvement in writing more efficient and maintainable code. I would have optimized state management and handled repeated patterns more effectively if I had known better practices earlier in the process.

• Styling Optimization: I now recognize the value of using utility-first CSS frameworks like Tailwind CSS, which would have made the styling process faster and more consistent.

• Enhanced Testing: In future projects, I plan to implement more rigorous unit and integration tests to ensure that features are working as expected and to catch potential bugs early in the development cycle.

Technologies Used

Throughout the project, I used several modern technologies, frameworks, and libraries to implement both the front-end and back-end functionality.

• React v17: Used for building dynamic and interactive user interfaces through a component-based architecture. React allows for efficient re-rendering, improving app performance, and enhancing the user experience.

• Firebase: Utilized for real-time database management, user authentication, and serverless backend services. Firebase helps to store and sync data instantly across clients, providing real-time updates without the need for complex server configurations.

• JavaScript (ES6+): The core language for implementing app logic, asynchronous functionality, and interacting with external APIs. ES6 features like async/await, arrow functions, and destructuring were heavily used to streamline the codebase.

• Zustand: A simple and lightweight state management library used to manage the app’s global state. Zustand provided a minimalistic way to manage and persist application data across components without the complexity of Redux.

• React Router: Used for managing routing and creating a seamless single-page app (SPA) experience. React Router allows for navigation between views without reloading the page, improving speed and user experience.

• CSS/SCSS: Used for styling the application and ensuring responsiveness across different screen sizes and devices. SCSS helped in writing cleaner, more maintainable styles with features like variables and mixins.

• Git & GitHub: Utilized for version control and collaboration with the development team. GitHub helped in managing code versions, resolving conflicts, and tracking progress while working in a team environment.

• Redux: A state management library used to handle the global state across the app. Redux enabled the centralization of state management, ensuring a predictable state and making it easier to debug.

• Redux Thunk: Middleware for Redux that allows for handling asynchronous actions, such as API calls. Redux Thunk made it easier to manage data fetching and side effects in the app.

• eslint v7: A tool used to identify and fix problematic patterns in JavaScript code. ESLint ensured the code adhered to best practices and maintained consistency across the codebase.

• axios: A promise-based HTTP client used for making API requests. Axios simplified the process of sending HTTP requests and handling responses, making it easy to interact with external APIs.

• Babel: A JavaScript compiler that allows us to use the latest ECMAScript features while ensuring compatibility with older browsers. Babel helped in writing modern JavaScript without worrying about compatibility issues.

Directory Structure

.
├── assets
│   ├── downvote.png
│   ├── filter-btn.png
│   ├── profile.png
│   ├── search.png
│   └── upvote.png
├── components
│   ├── app.jsx
│   ├── courseComponent
│   │   ├── index.css
│   │   └── index.jsx
│   ├── delete
│   │   ├── Delete.css
│   │   └── Delete.jsx
│   ├── friend
│   │   ├── Friend.css
│   │   └── Friend.jsx
│   ├── loadingIcon
│   │   └── index.jsx
│   ├── navbar
│   │   ├── Navbar.css
│   │   └── Navbar.jsx
│   ├── plan
│   │   ├── Plan.css
│   │   └── Plan.jsx
│   ├── plan2
│   │   ├── Plan2.css
│   │   └── plan2.jsx
│   ├── profile
│   │   ├── Profile.css
│   │   ├── Profile.jsx
│   │   ├── Sidebar.css
│   │   └── Sidebar.jsx
│   ├── searchItem
│   │   └── index.jsx
│   ├── termBuilderComponent
│   │   ├── index.css
│   │   └── index.jsx
│   └── termComponent
│       ├── index.css
│       └── index.jsx
├── containers
│   ├── adminPanel
│   │   ├── component.jsx
│   │   └── index.js
│   ├── authentication
│   │   ├── signInPanel
│   │   │   ├── component.jsx
│   │   │   └── index.js
│   │   ├── signOutPanel
│   │   │   ├── component.jsx
│   │   │   └── index.js
│   │   └── signUpPanel
│   │       ├── component.jsx
│   │       └── index.js
│   ├── feed
│   │   ├── feed.css
│   │   ├── feed.jsx
│   │   ├── feedFilter.css
│   │   ├── feedFilter.jsx
│   │   ├── post.jsx
│   │   └── sort.jsx
│   ├── friendPage
│   │   ├── AddUserPage.css
│   │   ├── AddUserPage.jsx
│   │   ├── FollowingPage.css
│   │   ├── FollowingPage.jsx
│   │   ├── FriendsNav.css
│   │   ├── FriendsNav.jsx
│   │   ├── FriendsPage.css
│   │   ├── FriendsPage.jsx
│   │   ├── RequestsPage.css
│   │   ├── RequestsPage.jsx
│   │   ├── ViewProfile.css
│   │   └── ViewProfile.jsx
│   ├── homepage
│   │   ├── AddTerms.jsx
│   │   ├── EditingTerm.jsx
│   │   ├── Homepage.css
│   │   ├── Homepage.jsx
│   │   ├── PotentialClass.jsx
│   │   ├── ProgressTracker.jsx
│   │   └── mockData.json
│   └── search
│       ├── searchBar
│       │   ├── component.jsx
│       │   └── index.js
│       └── searchPane
│           ├── component.jsx
│           └── index.js
├── hocs
│   └── requireAuth.jsx
├── index.html
├── index.js
├── services
│   ├── coursedata.json
│   ├── datastore.js
│   └── userstore.js
├── store
│   ├── actionCreators
│   │   ├── authActionCreators.js
│   │   ├── index.js
│   │   ├── requestActionCreators.js
│   │   ├── resourceActionCreators.js
│   │   ├── searchActionCreators.js
│   │   └── userActionCreators.js
│   ├── reducers
│   │   ├── authReducer.js
│   │   ├── index.js
│   │   ├── requestReducer.js
│   │   └── resourceReducer.js
│   └── requests
│       ├── authRequests.js
│       ├── index.js
│       ├── resourceRequests.js
│       ├── searchRequests.js
│       └── userRequests.js
├── style.scss
└── utils
    ├── constants.js
    └── store.js

Setup

1. Install Homebrew if you don't already have Homebrew installed.
2. brew install node if you don't already have node.
3. brew install watchman if you don't already have watchman.
4. yarn install to install the dependencies.
5. yarn dev to start the development environment.