{"id":22211845,"url":"https://github.com/manthanank/dev-to-clone-app","last_synced_at":"2026-05-05T13:37:12.838Z","repository":{"id":264512715,"uuid":"613492555","full_name":"manthanank/dev-to-clone-app","owner":"manthanank","description":"Dev.to Clone","archived":false,"fork":false,"pushed_at":"2023-03-13T17:14:41.000Z","size":116,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-14T14:47:32.610Z","etag":null,"topics":["angular","api","bootstrap","devto","tailwindcss"],"latest_commit_sha":null,"homepage":"https://dev-to-clone-app.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/manthanank.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},"funding":{"github":["manthanank"],"open_collective":"manthanank","buy_me_a_coffee":"manthanank","patreon":"manthanank"}},"created_at":"2023-03-13T17:14:34.000Z","updated_at":"2023-06-08T18:38:55.000Z","dependencies_parsed_at":"2024-11-24T20:25:24.824Z","dependency_job_id":null,"html_url":"https://github.com/manthanank/dev-to-clone-app","commit_stats":null,"previous_names":["manthanank/dev-to-clone-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/manthanank/dev-to-clone-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fdev-to-clone-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fdev-to-clone-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fdev-to-clone-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fdev-to-clone-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manthanank","download_url":"https://codeload.github.com/manthanank/dev-to-clone-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fdev-to-clone-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260653882,"owners_count":23042647,"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","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":["angular","api","bootstrap","devto","tailwindcss"],"created_at":"2024-12-02T20:39:05.702Z","updated_at":"2026-05-05T13:37:12.832Z","avatar_url":"https://github.com/manthanank.png","language":"TypeScript","funding_links":["https://github.com/sponsors/manthanank","https://opencollective.com/manthanank","https://buymeacoffee.com/manthanank","https://patreon.com/manthanank"],"categories":[],"sub_categories":[],"readme":"# Dev.to Clone\n\nA feature-rich clone of the [Dev.to](https://dev.to) developer community platform, built with **Angular 21** and **Tailwind CSS 4**. It integrates with the official Dev.to API to fetch real articles, tags, and user data.\n\n![Angular](https://img.shields.io/badge/Angular-21-DD0031?logo=angular\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?logo=typescript\u0026logoColor=white)\n![TailwindCSS](https://img.shields.io/badge/TailwindCSS-4.2-06B6D4?logo=tailwindcss\u0026logoColor=white)\n![License](https://img.shields.io/badge/License-MIT-green)\n\n---\n\n## ✨ Features\n\n- 📰 **Home Feed** — Browse the latest articles fetched from the Dev.to API\n- 📖 **Post Detail** — Full article view with reading time and reaction counts\n- 👤 **User Profiles** — View any developer's profile and their published articles\n- ✍️ **Create Post** — Write and publish new blog posts (authenticated)\n- 🔖 **Reading List** — Save articles to your personal reading list\n- 🏷️ **Tags** — Browse articles by tags/topics\n- 📋 **Listings** — Community job listings and classifieds\n- 🎙️ **Podcasts** — Discover developer podcasts\n- 🎥 **Videos** — Watch developer video content\n- ⚙️ **Settings** — Manage account settings and API configuration\n- 🔐 **Authentication** — Login, register, forgot password, and reset password flows\n- 🌙 **Dark / Light Mode** — Full theme toggle support\n- 📱 **Responsive Design** — Mobile-first, fully responsive layout\n\n---\n\n## 🛠️ Tech Stack\n\n| Technology                                          | Version | Purpose                    |\n| --------------------------------------------------- | ------- | -------------------------- |\n| [Angular](https://angular.io/)                      | 21.x    | Frontend framework         |\n| [TypeScript](https://www.typescriptlang.org/)       | 5.9.x   | Type-safe JavaScript       |\n| [Tailwind CSS](https://tailwindcss.com/)            | 4.2.x   | Utility-first CSS styling  |\n| [RxJS](https://rxjs.dev/)                           | 7.8.x   | Reactive programming       |\n| [Dev.to API](https://developers.forem.com/api/)     | v1      | Articles, users \u0026 tag data |\n| [Karma + Jasmine](https://karma-runner.github.io/)  | -       | Unit testing               |\n\n---\n\n## 📁 Project Structure\n\n```text\nsrc/\n├── app/\n│   ├── core/                   # Singleton services \u0026 guards\n│   │   ├── auth.service.ts     # Authentication logic\n│   │   ├── auth.guard.ts       # Route protection\n│   │   ├── api-config.service.ts # API key \u0026 URL configuration\n│   │   └── header/             # App header component\n│   ├── models/                 # TypeScript interfaces\n│   │   ├── post.interface.ts\n│   │   ├── user.interface.ts\n│   │   └── comment.interface.ts\n│   ├── pages/                  # Route-level page components\n│   │   ├── home/               # Home feed\n│   │   ├── post-detail/        # Article detail page\n│   │   ├── profile/            # User profile page\n│   │   ├── create-post/        # New post editor\n│   │   ├── reading-list/       # Saved articles\n│   │   ├── tags/               # Tags browser\n│   │   ├── listings/           # Job listings\n│   │   ├── podcasts/           # Podcasts page\n│   │   ├── videos/             # Videos page\n│   │   ├── settings/           # Account settings\n│   │   ├── about/              # About page\n│   │   ├── not-found/          # 404 page\n│   │   └── auth/               # Authentication pages\n│   │       ├── login/\n│   │       ├── register/\n│   │       ├── forgot-password/\n│   │       └── reset-password/\n│   └── shared/                 # Reusable components \u0026 services\n│       ├── data.service.ts     # Dev.to API data fetching\n│       ├── theme.service.ts    # Dark/light mode toggle\n│       └── post-card/          # Reusable post card component\n├── environments/               # Environment configuration\n└── styles.scss                 # Global styles\n```\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/) v20 or higher\n- [npm](https://www.npmjs.com/) v10 or higher\n- [Angular CLI](https://angular.io/cli) v21\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/manthanank/dev-to-clone-app.git\n   cd dev-to-clone-app\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Configure the environment** *(optional)*\n\n   To use the Dev.to API with your own API key, update `src/environments/environment.ts`:\n\n   ```ts\n   export const environment = {\n     production: false,\n     apiUrl: 'https://dev.to/api',\n     apiKey: 'YOUR_DEV_TO_API_KEY' // optional\n   };\n   ```\n\n   \u003e You can also set the API key at runtime via the **Settings** page in the app.\n\n4. **Start the development server**\n\n   ```bash\n   npm start\n   ```\n\n   Navigate to `http://localhost:4200/`. The app reloads automatically on file changes.\n\n---\n\n## 📜 Available Scripts\n\n| Command           | Description                                      |\n| ----------------- | ------------------------------------------------ |\n| `npm start`       | Run the development server at `localhost:4200`   |\n| `npm run build`   | Build the production bundle to `dist/`           |\n| `npm run watch`   | Build in development watch mode                  |\n| `npm test`        | Run unit tests via Karma                         |\n\n---\n\n## 🔌 Dev.to API Integration\n\nThis app uses the [Forem API v1](https://developers.forem.com/api/) (Dev.to's public API) to fetch real content.\n\n- **Articles** — Fetched via `GET /articles`\n- **Article Detail** — Fetched via `GET /articles/{id}`\n- **User Profile** — Fetched via `GET /users/{username}`\n- **Tags** — Fetched via `GET /tags`\n- **Authenticated User** — Fetched via `GET /users/me` (requires API key)\n\nA CORS proxy is configured in `proxy.conf.json` for local development.\n\n---\n\n## 🔐 Authentication\n\nAuthentication is simulated locally and supports:\n\n- **Email/Password Login** — Creates a local session stored in `localStorage`\n- **Registration** — Registers a new user profile locally\n- **API Key Login** — Provide a Dev.to API key to authenticate as your real Dev.to account\n- **Forgot / Reset Password** — Simulated password reset flow\n- **Auth Guard** — Protects the `/new` (Create Post) route from unauthenticated access\n\n---\n\n## 🗺️ Routes\n\n| Path                | Page            | Protected |\n| ------------------- | --------------- | --------- |\n| `/`                 | Home Feed       | No        |\n| `/post/:id`         | Post Detail     | No        |\n| `/user/:username`   | User Profile    | No        |\n| `/new`              | Create Post     | ✅ Yes    |\n| `/reading-list`     | Reading List    | No        |\n| `/tags`             | Tags            | No        |\n| `/about`            | About           | No        |\n| `/settings`         | Settings        | No        |\n| `/listings`         | Listings        | No        |\n| `/podcasts`         | Podcasts        | No        |\n| `/videos`           | Videos          | No        |\n| `/login`            | Login           | No        |\n| `/register`         | Register        | No        |\n| `/forgot-password`  | Forgot Password | No        |\n| `/reset-password`   | Reset Password  | No        |\n| `/**`               | 404 Not Found   | No        |\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please follow these steps:\n\n1. Fork the repository\n2. Create a new branch: `git checkout -b feature/your-feature-name`\n3. Commit your changes: `git commit -m 'feat: add your feature'`\n4. Push to the branch: `git push origin feature/your-feature-name`\n5. Open a Pull Request\n\n---\n\n## 📄 License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n\n## 🙏 Acknowledgements\n\n- [Dev.to](https://dev.to) — For the inspiration and their public API\n- [Forem](https://www.forem.com/) — The open-source platform behind Dev.to\n- [Angular Team](https://angular.io/) — For the excellent framework\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Fdev-to-clone-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanthanank%2Fdev-to-clone-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Fdev-to-clone-app/lists"}