GitNote is a comprehensive learning tool and an efficient progress tracker for developers. Seamlessly capture and organize knowledge, set and track learning goals, and monitor study habits with ease. Developed as part of the JSM Masterclass, GitNote empowers developers to enhance their productivity and knowledge management skills effortlessly.
- Authentication - Next auth for secure sign-up, sign-in, and logout functionalities.
- Onboarding – Provides an introduction and walkthrough for new users.
- Profile Management - Easily update profile details and link social media accounts for enhanced connectivity.
- Creating Learning Posts - Document knowledge, components, or workflows effortlessly, enriched with resources and links.
- Related Posts- Connect related content seamlessly for improved information accessibility.
- Tagging for Context - Enhance post context and retrieval efficiency with intuitive tagging.
- Contribution Grid - Track progress visually as the grid dynamically updates with each post similar to Github.
- Goals & Experience Tracking - Monitor and reflect on learning goals conveniently from your profile.
- Search & Filter - Retrieve past notes and tutorials swiftly with global search and filtering.
- Post Collection - Explore content easily with pagination features, witnessing your learning progression firsthand.
- TypeScript - Superset of JavaScript that adds static typing for improved code quality and maintainability.
- Next.js - Framework for building server-side-rendered React applications.
- PostgreSQL - Relational database management system.
- Prisma.io - ORM for interacting with the database.
- Supabase - Backend-as-a-Service for database management.
- Tailwind CSS - Utility-first CSS framework for styling.
- TinyMCE - WYSIWYG HTML editor.
- Prism.js - Lightweight syntax highlighter for code snippets.
- React DatePicker - Flexible date and time picker component for React applications.
Follow these steps to set up the project locally on your machine.
Prerequisites
Ensure you have the following installed:
Steps
- Clone the Repo:
git clone https://github.com/[username]/GitNote.git
cd GitNote- Install Dependencies
npm install- Set Up Environment Variables: Create a
.envfile in the project root:
DB_URL=""
DIRECT_URL=""
GITHUB_CLIENT_ID=""
GITHUB_CLIENT_SECRET=""
NEXTAUTH_SECRET=""
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""
AWS_S3_ACCESS_KEY=""
AWS_S3_SECRET_ACCESS_KEY=""
AWS_REGION=""
NEXT_PUBLIC_GOOGLE_PLACES_KEY=""- Run the Project
npm run devOpen http://localhost:3000 in your browser to view the project.
Home Page
🔳 Integrate contributions grid (react-calendar-heatmap)
Profile Page
🔳 Integrate contributions grid (react-calendar-heatmap)
Edit Profile Page
✅ 'Enter' keyboard event should not trigger form submit
✅ Delete a 'Learning Goal'
✅ Add a 'Cancel' button
✅ Disable 'Update Profile' button if no updates have been made to the inputs
✅ Disable dates before today in Availability
✅ Disable dates before start date in End Date Availability
Left Sidebar
✅ Display posts in the 'Posts' section
✅ Fix Search component to list 5 most recent posts without user input or hard refresh
Right Sidebar
🔳 Post Details: Determine what indicates a related post, and show related posts
🔳 Profile Page: If there are no social media links - move button under section and update text to 'Add social links'
✅ Update social links modal: If there are no updates made to the modal inputs, disable the 'Update Links' button
🔳 Create Post: Either remove 'Tags' section, or disable them
🔳 Fix red border around profile image\
Post Details Page
✅ Remove 'Resources & Links' section if there is no content
Create / Update Post Pages
🔳 Refactor these two components into one
✅ Fix padding in Tag input when there are two words
✅ Visually indicate which fields are required and/or optional
✅ Figure out focus ring order / Fix onEnter key press
✅ 'Add checkmark' button should be disabled if the input hasn't yet been filled
✅ Add a 'Cancel' button
✅ Disable 'Update Post' button if no updates have been made to the inputs
Miscellaneous Updates
✅ Add mobile responsiveness
✅ Add hover states to all clickable items
✅ Add loading.tsx files for each route
🔳 Add loading spinner on Login button
🔳 Add Skeleton loaders
✅ Create a seed file
✅ Add a Demo User
✅ Deploy site
🔳 Once a new user is onboarded - create main route with instructions & steps of how to begin - create UI for routes with no information in them
✅ Onbboarding - Disable dates before today in Availability
✅ Onbboarding - Disable dates before start date in End Date Availability
🔳 Ability to cancel onboarding process (reroutes user to sign-in/sign-up page
🔳 Ability to save mid onboarding process