-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
7 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,41 +1,20 @@ | ||
# instaclone - in progress | ||
# instaclone | ||
|
||
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)! | ||
- [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). | ||
|
||
### Things to do: | ||
- Core functionality of Instagram: | ||
- ~Creating accounts, logging in~ | ||
- ~Editing user profile, uploading profile image~ | ||
- ~Creating, viewing and deleting posts~ | ||
- ~following/unfollowing users~ | ||
- Commenting on posts, replying to comments | ||
- Liking posts and comments | ||
- Notification system | ||
- Searching for users. | ||
### 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.` | ||
|
||
|
||
|
||
- 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). |