{"id":27020139,"url":"https://github.com/ekaterinagorbunova/code-snippet-app","last_synced_at":"2026-05-09T02:03:39.572Z","repository":{"id":280693275,"uuid":"942772741","full_name":"EkaterinaGorbunova/code-snippet-app","owner":"EkaterinaGorbunova","description":"Code Snippet App with VS Code integration to create, edit and manage reusable code snippets","archived":false,"fork":false,"pushed_at":"2025-03-25T19:58:11.000Z","size":188,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T18:36:28.762Z","etag":null,"topics":["authentication","auto-save","chadcn-ui","nextjs15","postgresql","prisma-orm","server-actions","tailwindcss","typescript","vs-code-integration"],"latest_commit_sha":null,"homepage":"https://code-snippet-proapp.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EkaterinaGorbunova.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-04T16:44:49.000Z","updated_at":"2025-03-25T19:58:14.000Z","dependencies_parsed_at":"2025-03-23T20:30:37.454Z","dependency_job_id":"aa42bd10-b901-47a4-a2b8-21ef8937dd5f","html_url":"https://github.com/EkaterinaGorbunova/code-snippet-app","commit_stats":null,"previous_names":["ekaterinagorbunova/code-snippet-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/EkaterinaGorbunova/code-snippet-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EkaterinaGorbunova%2Fcode-snippet-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EkaterinaGorbunova%2Fcode-snippet-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EkaterinaGorbunova%2Fcode-snippet-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EkaterinaGorbunova%2Fcode-snippet-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EkaterinaGorbunova","download_url":"https://codeload.github.com/EkaterinaGorbunova/code-snippet-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EkaterinaGorbunova%2Fcode-snippet-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279014107,"owners_count":26085463,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","auto-save","chadcn-ui","nextjs15","postgresql","prisma-orm","server-actions","tailwindcss","typescript","vs-code-integration"],"created_at":"2025-04-04T18:29:10.668Z","updated_at":"2025-10-13T07:33:23.634Z","avatar_url":"https://github.com/EkaterinaGorbunova.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Code Snippet App\nThe Code Snippet App is a web-based tool that allows developers to create, edit and manage reusable code snippets efficiently. It features VS Code-like editor integration, real-time code synchronization and auto-save functionality. It provides a familiar and reliable environment for managing your code snippets.\n\n🚀 **[Live Demo](https://code-snippet-proapp.vercel.app/)**\n\nLogin Form\n![Login Form](public/screenshots/login-page.png)\n\nHome page with user's code snippets\n![Home Page](public/screenshots/home-page.png)\n\nEdit page with auto-save functionality\n![Edit Page](public/screenshots/edit-page.png)\n\n## Technical Stack\nThe project follows a modern web architecture with:\n- Server-side rendering via Next.js 15\n- Type safety with TypeScript\n- Responsive styling using Tailwind CSS\n- UI components from Shadcn UI library\n- Database operations through Prisma ORM\n- Clean routing structure using Next.js file-based routing\n- Secure session management using HTTP-only cookies\n- Server Actions for form handling\n- PostgreSQL database for data persistence\n\n## Features\n- User Authentication\n  - Register new account\n  - Login/Logout functionality\n  - Personal workspace for each user\n  - Stay logged in for 7 days with session management using cookies\n- Code Snippets Management\n  - Create and store code snippets with titles\n  - View a list of all personal snippets\n  - View individual snippets\n  - Edit existing snippets\n  - Delete snippets\n- Advanced Editor Features\n  - VS Code editor integration\n  - Real-time code synchronization\n  - Auto-save functionality\n  - Syntax highlighting\n  - Reset changes confirmation\n- Modern UI\n  - Clean and intuitive interface\n  - Interactive dialog confirmations\n    - Confirmation dialogs for delete operations\n    - Confirmation dialog for resetting changes\n    - Responsive design for mobile and desktop\n\n## Data Model\nThe App uses two main tables:\n- `User`: Stores user information (`id`, `username`, `password`)\n- `Block`: Stores code snippets (`id`, `title`, `code`, `userId`)\n\n## Get Started\n\nFirst, set up your environment:\n\n1. Clone the repository:\n```bash\nhttps://github.com/EkaterinaGorbunova/code-snippet-app.git\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Add environment variable\n\nCreate `.env` file in the root directory with:\n```\nDATABASE_URL=YOUR_POSTGRESQL_CONNECTION_STRING\"\n```\n\n4. Set up your database:\n```bash\nnpx prisma generate\nnpx prisma migrate dev --name init\n```\n\n5. Open Prisma Studio to view your database: \n```bash\nnpx prisma studio\n```\n\n6. Run the development server:\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can either:\n- Register a new account, or\n- Use existing test account:\n  - Username: `john123`\n  - Password: `john123`\n\n## Debugging\n\nWhen using a package like 'react-modal' with Node version `23.2`, the build fails.\n\n```bash\nCreating an optimized production build ...\nFailed to compile.\n\n./src/app/blocks/[id]/edit/EditForm.tsx + 3 modules\nUnexpected end of JSON input\n```\n\nSolution:\n\nUse Node version `23.3.0`\n\nhttps://github.com/webpack/webpack/issues/18963\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekaterinagorbunova%2Fcode-snippet-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fekaterinagorbunova%2Fcode-snippet-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekaterinagorbunova%2Fcode-snippet-app/lists"}