diff --git a/README.md b/README.md index 0d6babe..0150b7b 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,90 @@ -# React + TypeScript + Vite -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +# Simple Blog Application -Currently, two official plugins are available: +This is a blog application built using React, TypeScript, and Vite. It features a comprehensive suite of functionalities including post management, user authentication, and profile management. -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## Getting Started -## Expanding the ESLint configuration +### Clone the Repository and Install Dependencies -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: +```bash +git clone +cd +yarn +``` + +## Running the Application -- Configure the top-level `parserOptions` property like this: +Start the application with: -```js -export default { - // other rules... - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json'], - tsconfigRootDir: __dirname, - }, -} +```bash +yarn dev ``` -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list +Access the application at [http://localhost:7777](http://localhost:7777). + +## Features + +- User registration and authentication +- CRUD operations for blog posts +- Search operations for blog posts +- CRUD operations for Commenting on posts +- Assigning categories to posts +- Pagination and search for posts +- Role-based access control + +### GraphQL + +Uses GraphQL for data fetching. Schema and queries: + +- **Schema**: `.graphqlrc` +- **Queries**: `src/lib/graphql/graphql.ts` + +### Styling + +Styled using Tailwind CSS and shadcn + +## Testing + +No tests currently included. Can be added using Jest and React Testing Library. + +## Deployment + +This guide details the steps for deploying the application using GitHub Actions, as defined in the `deploy.yaml` file. + +### Prerequisites + +Before you start, ensure you have the following: + +- An **AWS S3 bucket** for deploying the built application. +- **AWS credentials** (access key ID and secret access key) with permissions for S3 bucket operations. +- A **CloudFront distribution** for serving the application. + +### Steps for Deployment + +#### 1. Set Up AWS Credentials in GitHub Secrets + +Add your AWS credentials to your GitHub repository secrets: + +1. Go to your repository on GitHub. +2. Click on `Settings` > `Secrets` > `New repository secret`. +3. Add the following secrets: + - `AWS_S3_ACCESS_KEY_ID`: Your AWS access key ID. + - `AWS_S3_SECRET_ACCESS_KEY_ID`: Your AWS secret access key. + - `AWS_S3_BUCKET_NAME`: The name of your S3 bucket. + +#### 2. Trigger the Workflow + +The deployment workflow is triggered with every push to the main branch: + +- Push your changes to the main branch to start the deployment process. + +#### Workflow Steps + +The GitHub Actions workflow performs the following: + +1. Checks out your code from the repository. +2. Installs dependencies and builds the application. +3. Configures AWS credentials using the provided repository secrets. +4. Deploys the application to the specified AWS S3 bucket. +5. Invalidates the CloudFront distribution to serve the latest version of the application. diff --git a/package.json b/package.json index eb2593b..d950d98 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,7 @@ "react-router-dom": "^6.20.0", "tailwind-merge": "^2.0.0", "tailwindcss-animate": "^1.0.7", - "zod": "^3.22.4", - "zustand": "^4.4.7" + "zod": "^3.22.4" }, "devDependencies": { "@graphql-codegen/cli": "^5.0.0", diff --git a/yarn.lock b/yarn.lock index cbd0a87..b24f31c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4734,11 +4734,6 @@ use-sidecar@^1.1.2: detect-node-es "^1.1.0" tslib "^2.0.0" -use-sync-external-store@1.2.0: - version "1.2.0" - resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz" - integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== - util-deprecate@^1.0.1, util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz" @@ -4930,10 +4925,3 @@ zod@^3.22.4: version "3.22.4" resolved "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz" integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg== - -zustand@^4.4.7: - version "4.4.7" - resolved "https://registry.npmjs.org/zustand/-/zustand-4.4.7.tgz" - integrity sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw== - dependencies: - use-sync-external-store "1.2.0"