From 8cbaa1f5a66fb4e4653aa4a1b6c0a5f62d6cad36 Mon Sep 17 00:00:00 2001 From: "S. Cabrera" <49458912+lyncasterc@users.noreply.github.com> Date: Sun, 1 May 2022 18:27:05 -0400 Subject: [PATCH 1/8] Create README.md --- README.md | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..31ab2b4 --- /dev/null +++ b/README.md @@ -0,0 +1,39 @@ +# instaclone - in progress + +Instaclone is an Instagram clone written using the MERN stack + TypeScript. + +This is a final project after having completed [Full Stack Open 2022](https://fullstackopen.com/). + +To check out the work completed so far, switch to the `dev` branch! + +### How to navigate this project +#### Frontend +- The frontend uses [RTK Query](https://redux-toolkit.js.org/rtk-query/overview). The [api slice](https://github.com/lyncasterc/instaclone/blob/dev/frontend/src/app/apiSlice.ts) +handles data-fetching and caching. Here's an [example of data-fetching logic using RTK Query](https://github.com/lyncasterc/instaclone/blob/dev/frontend/src/common/hooks/useAuth.ts) in my `useAuth.ts` hook. +- [Mantine](https://mantine.dev/) is used for the styles. Check out the [`BottomNavBar`](https://github.com/lyncasterc/instaclone/tree/dev/frontend/src/common/components/BottomNavBar) for an example! +- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) with [MSW](https://mswjs.io/) for unit and integration tests. Here's an [example](https://github.com/lyncasterc/instaclone/blob/dev/frontend/src/test/int/login.test.tsx)! +- [Cypress](https://docs.cypress.io/) for e2e tests. Here's an [example](https://github.com/lyncasterc/instaclone/blob/dev/frontend/cypress/integration/navbar.spec.ts)! + +#### Backend +- Uses a in-memory MongoDB server for testing and some development. [Check it out!](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/mongo/test-mongodb.ts) However, I'm using a Docker Mongo container for the majority of the development of this app. Here's the [docker-compose file.](https://github.com/lyncasterc/instaclone/blob/dev/backend/docker-compose.dev.yml) +- I seperate the Mongo querying logic from the Express routing logic. Each model has it's own _service_ ([User service example](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/services/user-service.ts)) and router ([User router example](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/routes/users.ts)). +- Uses JWT for authentication. Here's the [login route](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/routes/login.ts) and the [`authenticator` custom middleware](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/utils/middleware.ts) used for protecting certain routes. +- Uses [Cloudinary](https://cloudinary.com/documentation) for image uploading. Here's the [`cloudinary.ts` file](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/utils/cloudinary.ts) I've written so far (work in progress, but image uploading is working). +- Integration tests using [Jest](https://jestjs.io/) and [supertest](https://github.com/visionmedia/supertest). [Example](https://github.com/lyncasterc/instaclone/blob/dev/backend/test/login-api.test.ts). + +### Things to do: +- Core functionality of the Instagram: + - ~Create account, sign up, login~ + - Editing user, uploading avatar image, following/unfollowing users + - Creating posts, liking posts, deleting posts + - Commenting on posts, commenting on comments +- Searching for users. +- Instant notifications and direct messaging with [Socket.io](https://socket.io/get-started/). +### To run on your machine: +- clone this repo, then run `git checkout dev` to switch to the dev branch. +- Run `cd frontend` to switch to the `frontend` directory. +- run `npm run server:dev` to run the backend server. This also starts up an in-memory MongoDB server. +- In a different terminal in the `frontend` directory, run `npm start.` + + + From 009b491948d2892f1aab79ff278542604cf44c47 Mon Sep 17 00:00:00 2001 From: "S. Cabrera" <49458912+lyncasterc@users.noreply.github.com> Date: Sun, 1 May 2022 19:07:44 -0400 Subject: [PATCH 2/8] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 31ab2b4..b38672a 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ handles data-fetching and caching. Here's an [example of data-fetching logic usi - Searching for users. - Instant notifications and direct messaging with [Socket.io](https://socket.io/get-started/). ### To run on your machine: -- clone this repo, then run `git checkout dev` to switch to the dev branch. +- clone this repo, run `npm i`, then run `git checkout dev` to switch to the dev branch. - Run `cd frontend` to switch to the `frontend` directory. - run `npm run server:dev` to run the backend server. This also starts up an in-memory MongoDB server. - In a different terminal in the `frontend` directory, run `npm start.` From 523485b24f2accd05b424954b9cb5d09aa738918 Mon Sep 17 00:00:00 2001 From: "S. Cabrera" <49458912+lyncasterc@users.noreply.github.com> Date: Wed, 18 May 2022 18:36:55 -0400 Subject: [PATCH 3/8] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b38672a..800ec88 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ handles data-fetching and caching. Here's an [example of data-fetching logic usi - Integration tests using [Jest](https://jestjs.io/) and [supertest](https://github.com/visionmedia/supertest). [Example](https://github.com/lyncasterc/instaclone/blob/dev/backend/test/login-api.test.ts). ### Things to do: -- Core functionality of the Instagram: +- Core functionality of Instagram: - ~Create account, sign up, login~ - Editing user, uploading avatar image, following/unfollowing users - Creating posts, liking posts, deleting posts From 33386bdc1268fadf62c9fd4fbdbe4b65296a088b Mon Sep 17 00:00:00 2001 From: "S. Cabrera" <49458912+lyncasterc@users.noreply.github.com> Date: Sun, 20 Aug 2023 16:38:50 -0400 Subject: [PATCH 4/8] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 800ec88..7d30954 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ handles data-fetching and caching. Here's an [example of data-fetching logic usi ### Things to do: - Core functionality of Instagram: - ~Create account, sign up, login~ - - Editing user, uploading avatar image, following/unfollowing users + - ~User profile view~, ~editing user profile~, ~uploading avatar image~, following/unfollowing users - Creating posts, liking posts, deleting posts - Commenting on posts, commenting on comments - Searching for users. From 2dbd9efab2fac8c4b4ce0425421023b8832c2104 Mon Sep 17 00:00:00 2001 From: Steven Cabrera <49458912+lyncasterc@users.noreply.github.com> Date: Fri, 8 Mar 2024 15:03:53 -0500 Subject: [PATCH 5/8] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7d30954..f6e52f9 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Instaclone is an Instagram clone written using the MERN stack + TypeScript. This is a final project after having completed [Full Stack Open 2022](https://fullstackopen.com/). -To check out the work completed so far, switch to the `dev` branch! +To check out the work completed so far, switch to the `dev` branch! ### How to navigate this project #### Frontend From ff363c38b6518adfb49928fea3c1d3f8e36bcd25 Mon Sep 17 00:00:00 2001 From: Steven Cabrera <49458912+lyncasterc@users.noreply.github.com> Date: Thu, 14 Mar 2024 19:46:10 -0400 Subject: [PATCH 6/8] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f6e52f9..17d33a4 100644 --- a/README.md +++ b/README.md @@ -24,9 +24,9 @@ handles data-fetching and caching. Here's an [example of data-fetching logic usi ### Things to do: - Core functionality of Instagram: - ~Create account, sign up, login~ - - ~User profile view~, ~editing user profile~, ~uploading avatar image~, following/unfollowing users - - Creating posts, liking posts, deleting posts - - Commenting on posts, commenting on comments + - ~User profile view~, ~editing user profile~, ~uploading avatar image~, ~following/unfollowing users~ + - ~Creating posts~, liking posts, ~deleting posts~ + - ~Commenting on posts, commenting on comments,~ liking comments - Searching for users. - Instant notifications and direct messaging with [Socket.io](https://socket.io/get-started/). ### To run on your machine: From 458db5c5da73a5f0eb50c85ee1821193bc261384 Mon Sep 17 00:00:00 2001 From: Steven Cabrera <49458912+lyncasterc@users.noreply.github.com> Date: Thu, 28 Mar 2024 18:37:39 -0400 Subject: [PATCH 7/8] Update README.md --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 17d33a4..6378305 100644 --- a/README.md +++ b/README.md @@ -10,27 +10,27 @@ This is a final project after having completed [Full Stack Open 2022](https://fu #### Frontend - The frontend uses [RTK Query](https://redux-toolkit.js.org/rtk-query/overview). The [api slice](https://github.com/lyncasterc/instaclone/blob/dev/frontend/src/app/apiSlice.ts) handles data-fetching and caching. Here's an [example of data-fetching logic using RTK Query](https://github.com/lyncasterc/instaclone/blob/dev/frontend/src/common/hooks/useAuth.ts) in my `useAuth.ts` hook. -- [Mantine](https://mantine.dev/) is used for the styles. Check out the [`BottomNavBar`](https://github.com/lyncasterc/instaclone/tree/dev/frontend/src/common/components/BottomNavBar) for an example! -- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) with [MSW](https://mswjs.io/) for unit and integration tests. Here's an [example](https://github.com/lyncasterc/instaclone/blob/dev/frontend/src/test/int/login.test.tsx)! +- [Mantine](https://mantine.dev/) is used for styling. +- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) with [MSW](https://mswjs.io/) for unit and integration tests. Here's an [example](https://github.com/lyncasterc/instaclone/blob/dev/frontend/src/test/int/httpRefreshInterceptor.test.tsx) of a test I wrote to ensure that my HTTP interceptor for refreshing an expired access token is working. - [Cypress](https://docs.cypress.io/) for e2e tests. Here's an [example](https://github.com/lyncasterc/instaclone/blob/dev/frontend/cypress/integration/navbar.spec.ts)! #### Backend - Uses a in-memory MongoDB server for testing and some development. [Check it out!](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/mongo/test-mongodb.ts) However, I'm using a Docker Mongo container for the majority of the development of this app. Here's the [docker-compose file.](https://github.com/lyncasterc/instaclone/blob/dev/backend/docker-compose.dev.yml) -- I seperate the Mongo querying logic from the Express routing logic. Each model has it's own _service_ ([User service example](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/services/user-service.ts)) and router ([User router example](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/routes/users.ts)). -- Uses JWT for authentication. Here's the [login route](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/routes/login.ts) and the [`authenticator` custom middleware](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/utils/middleware.ts) used for protecting certain routes. -- Uses [Cloudinary](https://cloudinary.com/documentation) for image uploading. Here's the [`cloudinary.ts` file](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/utils/cloudinary.ts) I've written so far (work in progress, but image uploading is working). -- Integration tests using [Jest](https://jestjs.io/) and [supertest](https://github.com/visionmedia/supertest). [Example](https://github.com/lyncasterc/instaclone/blob/dev/backend/test/login-api.test.ts). +- I seperate the Mongo querying/business logic from the Express routing logic. Each model has it's own _service_ ([User service example](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/services/user-service.ts)) and router ([User router example](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/routes/users.ts)). +- Uses JWT and bycrypt for authentication and implements a refresh token/access token flow. Here's the [router handling authentication](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/routes/auth.ts) and the [`authenticator` custom middleware](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/utils/middleware.ts) used for protecting certain routes. +- Uses [Cloudinary](https://cloudinary.com/documentation) for image uploading. Here's the [`cloudinary.ts` file](https://github.com/lyncasterc/instaclone/blob/dev/backend/src/utils/cloudinary.ts) I've written to work with the Cloudinary Upload API. +- Integration tests using [Jest](https://jestjs.io/) and [supertest](https://github.com/visionmedia/supertest). [Example](https://github.com/lyncasterc/instaclone/blob/dev/backend/test/auth-api.test.ts). ### Things to do: - Core functionality of Instagram: - ~Create account, sign up, login~ - ~User profile view~, ~editing user profile~, ~uploading avatar image~, ~following/unfollowing users~ - - ~Creating posts~, liking posts, ~deleting posts~ - - ~Commenting on posts, commenting on comments,~ liking comments + - ~Creating posts, liking posts, deleting posts~ + - ~Commenting on posts, commenting on comments, liking comments~ - Searching for users. -- Instant notifications and direct messaging with [Socket.io](https://socket.io/get-started/). +- ~Notifications system with [Socket.io](https://socket.io/get-started/).~ ### To run on your machine: -- clone this repo, run `npm i`, then run `git checkout dev` to switch to the dev branch. +- clone this repo, run `npm i`, then run `git checkout dev` to switch to the dev branch.~ - Run `cd frontend` to switch to the `frontend` directory. - run `npm run server:dev` to run the backend server. This also starts up an in-memory MongoDB server. - In a different terminal in the `frontend` directory, run `npm start.` From 25c54ca2d54c9ce79c91b0a4e08690aa56b5515a Mon Sep 17 00:00:00 2001 From: Steven Cabrera <49458912+lyncasterc@users.noreply.github.com> Date: Fri, 29 Mar 2024 16:53:07 -0400 Subject: [PATCH 8/8] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6378305..17824b5 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ handles data-fetching and caching. Here's an [example of data-fetching logic usi - ~User profile view~, ~editing user profile~, ~uploading avatar image~, ~following/unfollowing users~ - ~Creating posts, liking posts, deleting posts~ - ~Commenting on posts, commenting on comments, liking comments~ -- Searching for users. +- ~Searching for users.~ - ~Notifications system with [Socket.io](https://socket.io/get-started/).~ ### To run on your machine: - clone this repo, run `npm i`, then run `git checkout dev` to switch to the dev branch.~