OVERVIEW
CodeSnipIt is a web application designed to help developers save, categorize, and manage their code snippets in one place. Whether working on multiple projects or learning new programming languages, this tool ensures you can keep track of useful code snippets and access them easily when needed.
TECHNICAL HIGHLIGHTS
| Advanced Categorization and Tagging: | Organize snippets by language. |
| Syntax Highlighting: | Supports 21 languages. |
| User Authentication: | Secure with Django REST Framework and JWT. |
| Persistent Login: | Stay logged in for 30 days. |
| Responsive UI: | Built with React and Chakra UI. |
| State Management: | Uses Zustand and React Query. |
| Asynchronous Operations: | Employs React Query for handling server state and asynchronous operations, offering features like caching and background updates. |
| Robust API Integration: | Integrates seamlessly with the frontend using a well-structured API built with Django REST Framework. |
| Form Validations: | Uses React Hook Form and Zod. |
FEATURES
- Save code snippets with titles.
- Manage code snippets (edit, copy, and delete).
- Categorize snippets by language.
- Scroll to top button.
- Syntax highlighting for 21 programming languages.
- User authentication and authorization.
- Light/dark mode.
- Change account name and password in settings.
- Responsive design for mobile and desktop use.
DEMO
INSTALLATION
Clone Repository
git clone https://github.com/keenntot2/CodeSnipIt.git
Backend Setup:
- Navigate to the project directory:
cd CodeSnipit/capstone - Create a virtual environment:
python -m venv venv - Activate the virtual environment:
- Windows:
venv/Scripts/activate - Unix/MacOS:
source venv/bin/activate
- Windows:
- Install dependencies:
pip install -r requirements.txt - Make migrations:
python manage.py makemigrations backend - Migrate the database:
python manage.py migrate - Load initial data:
python manage.py loaddata languages - Run the Django server:
python manage.py runserver
- Navigate to the project directory:
Frontend Setup:
- Navigate to the frontend directory:
cd frontend - Install modules:
npm install - Run the React server:
npm run dev
- Navigate to the frontend directory:
USAGE
- Register or Log In:
- Create a new account or log in with existing credentials.
- Add a Snippet:
- Click on "Add Snippet" under the appropriate language, fill in the title and code, and save.
- Manage Snippets:
- View, edit, or delete snippets on the homepage.
- Filter snippets by language.
- Settings:
- Choose between light or dark mode.
- Change account name and password.
TOOLS AND FRAMEWORKS
Backend:
- Django
- Django REST Framework
- Django Simple JWT
- django-cors-headers
Frontend:
- React
- Vite
- Chakra UI
- React Router
- React Query
- React Hook Form
- React Syntax Highlighter
- React Icons
- Zustand
- Zod
Others:
- TypeScript
- Axios
- Git for version control