{"id":20502807,"url":"https://github.com/sainiabhishek/fullstack_task-app","last_synced_at":"2026-01-27T02:03:16.304Z","repository":{"id":186758783,"uuid":"674997593","full_name":"SAINIAbhishek/fullstack_task-app","owner":"SAINIAbhishek","description":"The purpose of this project is to demonstrate a fully functional FullStack Task Application keeping security in mind. The client-side, or frontend component, is developed using React.js while the server-side, or backend component, is built using Node.js.","archived":false,"fork":false,"pushed_at":"2024-11-21T11:37:59.000Z","size":1103,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T20:16:34.891Z","etag":null,"topics":["cookie","docker","docker-compose","github-actions","jwt","mongodb","nodejs","pipeline","react-query","reactjs","tailwindcss","vite","worflows"],"latest_commit_sha":null,"homepage":"","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/SAINIAbhishek.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,"zenodo":null}},"created_at":"2023-08-05T12:37:59.000Z","updated_at":"2024-11-20T16:12:20.000Z","dependencies_parsed_at":"2023-09-23T09:48:16.556Z","dependency_job_id":"b63708ec-43db-47ff-a274-5909e25b4d62","html_url":"https://github.com/SAINIAbhishek/fullstack_task-app","commit_stats":null,"previous_names":["sainiabhishek/fullstack_todo-app","sainiabhishek/fullstack_task-app"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/SAINIAbhishek/fullstack_task-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAINIAbhishek%2Ffullstack_task-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAINIAbhishek%2Ffullstack_task-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAINIAbhishek%2Ffullstack_task-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAINIAbhishek%2Ffullstack_task-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SAINIAbhishek","download_url":"https://codeload.github.com/SAINIAbhishek/fullstack_task-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAINIAbhishek%2Ffullstack_task-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28796962,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T01:07:07.743Z","status":"online","status_checked_at":"2026-01-27T02:00:07.755Z","response_time":168,"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":["cookie","docker","docker-compose","github-actions","jwt","mongodb","nodejs","pipeline","react-query","reactjs","tailwindcss","vite","worflows"],"created_at":"2024-11-15T19:27:46.237Z","updated_at":"2026-01-27T02:03:16.290Z","avatar_url":"https://github.com/SAINIAbhishek.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FullStack Task Application [![Fullstack Tasks Application Pipeline](https://github.com/SAINIAbhishek/fullstack_task-app/actions/workflows/ci.yml/badge.svg)](https://github.com/SAINIAbhishek/fullstack_task-app/actions/workflows/ci.yml)\n\nThe purpose of this project is to demonstrate a fully functional FullStack Task Application with a focus on security. The client-side, or frontend component, is developed using React.js, while the server-side, or backend component, is built using Node.js.\n\n![Signin page](signin.png)\n![Register page](register.png)\n![Home page](home.png)\n\n---\n\n## Frontend (React + TypeScript + Vite + Tailwind CSS)\n\nThe project's organization follows industry standards, employing a feature-based directory structure and maintaining a consistent naming convention.\n\nThe application uses the Context API and Hooks for effective state management.\n\n### Stacks\n\n- TypeScript\n- Formik\n- React Query\n- Axios\n- React cookie\n- Yup\n- Tailwind CSS\n- React Router Dom\n- Eslint\n- Prettier\n- React i18next\n- Docker image ([Frontend Image](https://hub.docker.com/r/sainiabhishek/fullstack_task-frontend))\n\n### How to Setup the Frontend\n\n- Clone the project and navigate to the frontend directory in your terminal.\n- Run the following command to install all necessary dependencies:\n\n```bash\nnpm run install:packages\n```\n\n- Duplicate the `.env.example` file and rename the copy to `.env`. Modify the variables as needed.\n\n### How to Run the Frontend\n\n- After installing the dependencies, you can either:\n  - Go to the `package.json` file and click on the play button next to the `dev` script under the \"scripts\" section.\n  - Or, run the following command in your terminal:\n\n```bash\nnpm run dev\n```\n\n---\n\n## Backend (Node + Express + Winston + TypeScript + JWT)\n\nThe backend API for the tasks project is designed with various environments in mind. The project structure adheres to best practices and conventions for Node.js applications.\n\n### Features\n\n- **TypeScript:** Enhances development with static typing, leading to more reliable and maintainable code.\n- **Request Limiter:** Prevents abuse or overload of routes by limiting request rates, enhancing security.\n- **Centralized Error Handling:** Streamlines error management and maintains a consistent user experience.\n- **API Versioning:** Organizes routes and ensures compatibility, preventing breaking changes for existing clients.\n- **Role-Based Access Control:** Provides fine-grained access management based on user roles.\n- **JWT Authentication:** Secures user authentication and authorization using JSON Web Tokens.\n- **Password Reset via Email:** Enhances account security and recovery options through email notifications.\n- **MongoDB with Mongoose:** Utilizes MongoDB for its speed and scalability, with Mongoose simplifying database interactions.\n- **ESLint:** Enforces coding standards and best practices for improved code quality.\n- **Prettier:** Formats code consistently according to predefined rules.\n- **Cookies for Tokens:** Uses cookies to store tokens securely, improving authentication and session management.\n- **Logging:** Utilizes Winston for robust and flexible logging, aiding in debugging and monitoring.\n- **Middleware for Exception Handling:** Improves error management within async Express routes.\n\n### API Stacks\n\n- Node.js\n- Express.js\n- Typescript\n- Mongoose\n- MongoDb\n- Joi\n- JWT\n- Cookies\n- Winston\n- Rate Limiter\n- Roles\n- Nodemailer\n- Docker image ([API Image](https://hub.docker.com/r/sainiabhishek/fullstack_task-api))\n\n### Setup MAILTRAP\n\nTo test email functionality, use Mailtrap: [Mailtrap](https://mailtrap.io/). Create your credentials and place them in the `.env` file under **Mailtrap (Email Service) Info**.\n\n### How to Setup the Backend\n\n- Clone the project and navigate to the server directory in your terminal.\n- Run the following command to install all necessary dependencies:\n\n```bash\nnpm run install:packages\n```\n\n- Duplicate the `.env.example` file and save the copy as `.env` in the server directory. Modify the variables as needed.\n\n### How to Run the Backend\n\n- After installing the dependencies, you can either:\n  - Go to the `package.json` file of the server and click on the play button next to the `watch` script under the \"scripts\" section.\n  - Or, run the following command in your terminal:\n\n```bash\nnpm run watch\n```\n\n### Access the API\n\n```bash\nhttp://localhost:3001/api/v1/\n```\n\n### Generating Secrets\n\n- To generate a secret token and refresh token for the `.env` file, open your terminal and run:\n\n```bash\nnode\n```\n\n- Then, in the Node.js REPL:\n\n```bash\nrequire('crypto').randomBytes(64).toString('hex')\n```\n\n### Running the Project with Docker Compose\n\n- Ensure Docker is installed on your computer.\n- Navigate to each directory where a `.env.example` file is present. Copy or rename the `.env.example` file to `.env`, and fill in the required values based on your environment.\n- Open your terminal and navigate to the root directory of your project.\n- Run the following command:\n\n```bash\ndocker-compose up -d\n```\n\nThis command will fetch all necessary libraries and dependencies, set up the environment, and start the services as defined in your docker-compose.yml file. Follow any additional setup or configuration instructions provided in the README file.\n\n## GitHub Actions\n\nThe project uses GitHub Actions for Continuous Integration (CI). The CI pipeline is defined in the `.github/workflows/ci.yml` file. It ensures that the code is built, tested, and validated automatically on each push and pull request.\n\n### CI Workflow\n\nThe workflow performs the following steps:\n\n**Checkout Code**: Retrieves the latest code from the repository.\n**Set Up Node.js**: Installs the specified Node.js version.\n**Install Dependencies**: Installs all project dependencies.\n**Run Tests**: Executes tests using Vitest.\n**Build Application**: Builds the frontend and backend components (if applicable).\n\n### Configuration\n\nYou can view and manage the CI configuration in the `.github/workflows/ci.yml` file. The pipeline is configured to stop and exit if any step fails, ensuring that issues are addressed promptly.\n\nFor more details, visit the [GitHub Actions page](https://github.com/SAINIAbhishek/fullstack_task-app/actions)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsainiabhishek%2Ffullstack_task-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsainiabhishek%2Ffullstack_task-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsainiabhishek%2Ffullstack_task-app/lists"}