├── .dockerignore ├── .env.sample ├── .eslintignore ├── .eslintrc ├── .github └── workflows │ └── node.yaml ├── .gitignore ├── .history ├── package_20230114161045.json └── package_20230114163606.json ├── Dockerfile ├── LICENSE.md ├── README.md ├── architecture ├── backend.dio └── backend.png ├── client ├── .dockerignore ├── .eslintrc.json ├── .gitignore ├── CONTRIBUTING.md ├── Dockerfile ├── README.md ├── jest.config.js ├── jest.setup.js ├── next-env.d.ts ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── _app.tsx │ ├── _document.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ ├── assets │ │ ├── images │ │ │ ├── Tiktok.svg │ │ │ ├── facebookimg.svg │ │ │ ├── instagramimg.svg │ │ │ ├── snapchatimg.svg │ │ │ └── twitterimg.svg │ │ ├── people_alias.png │ │ ├── people_alias2.svg │ │ └── people_alias3.png │ ├── favicon.ico │ ├── intro │ │ ├── left.svg │ │ ├── right.svg │ │ └── yellow.svg │ └── vercel.svg ├── src │ ├── components │ │ ├── ComingSoon │ │ │ ├── ComingSoon.tsx │ │ │ └── styles.ts │ │ ├── Footer │ │ │ ├── Newsletter │ │ │ │ ├── index.tsx │ │ │ │ └── styles.ts │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── Hint │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── Navbar │ │ │ ├── Drawer │ │ │ │ ├── Drawer.tsx │ │ │ │ └── styles.ts │ │ │ ├── Switcher │ │ │ │ └── index.tsx │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── Search │ │ │ ├── SearchBox │ │ │ │ ├── SearchBox.test.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── styles.ts │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── SearchResult │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ └── intro │ │ │ ├── Intro.tsx │ │ │ └── styles.ts │ ├── interfaces │ │ └── index.ts │ └── utils │ │ ├── Layout.tsx │ │ ├── Link.tsx │ │ ├── PageProvider.tsx │ │ ├── createEmotionCache.ts │ │ ├── data.ts │ │ ├── theme.ts │ │ ├── userInfoContext.tsx │ │ └── userInfoReducer.tsx ├── tsconfig.json └── types.d.ts ├── docker-compose.yml ├── jest.config.ts ├── package-lock.json ├── package.json ├── server ├── app.ts ├── controllers │ ├── Alias.test.ts │ ├── Alias.ts │ └── Healthcheck.ts ├── platforms │ ├── platform.ts │ ├── twitter │ │ └── twitter.ts │ └── youtube │ │ └── youtube.ts ├── routes │ └── Api.ts ├── server.ts └── tests │ └── Alias.test.ts ├── tsconfig.build.json └── tsconfig.json /.dockerignore: -------------------------------------------------------------------------------- 1 | .dockerignore 2 | *.md 3 | node_modules 4 | build 5 | client 6 | .github 7 | dist 8 | .env -------------------------------------------------------------------------------- /.env.sample: -------------------------------------------------------------------------------- 1 | PORT=8080 2 | TWITTER_BEARER_TOKEN="" 3 | YOUTUBE_API_KEY="" -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "plugins": [ 5 | "@typescript-eslint" 6 | ], 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:@typescript-eslint/eslint-recommended", 10 | "plugin:@typescript-eslint/recommended" 11 | ], 12 | "rules": { //For list of rules, https://eslint.org/docs/latest/rules/ 13 | "no-console": 2 // Remember, this means error! 14 | } 15 | } -------------------------------------------------------------------------------- /.github/workflows/node.yaml: -------------------------------------------------------------------------------- 1 | name: Node.js CI 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | pull_request: 7 | branches: [ main ] 8 | 9 | jobs: 10 | build: 11 | name: Server Node.js ${{ matrix.node-version }} 12 | runs-on: ubuntu-latest 13 | strategy: 14 | matrix: 15 | node-version: [17.x] 16 | steps: 17 | - uses: actions/checkout@v3 18 | - name: Use Node.js ${{ matrix.node-version }} 19 | uses: actions/setup-node@v3 20 | with: 21 | node-version: ${{ matrix.node-version }} 22 | - run: npm install 23 | - run: npm run build --if-present 24 | - run: npm test 25 | - name: Building Client 26 | run: cd client/ 27 | - run: npm install 28 | - run: npm run lint --if-present 29 | - run: npm run build --if-present 30 | 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | .env 37 | server.js 38 | dist/ 39 | -------------------------------------------------------------------------------- /.history/package_20230114161045.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aliascheck", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "tsc --project './tsconfig.json' --watch & ts-node server/server.ts", 7 | "build": "tsc --project './tsconfig.build.json'", 8 | "start": "ts-node server/server.ts", 9 | "lint": "eslint . --ext .ts", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.27.2", 14 | "dotenv": "^16.0.1", 15 | "express": "^4.18.1", 16 | "http-status-codes": "^2.2.0", 17 | "i": "^0.3.7", 18 | "twitter-api-v2": "^1.12.5", 19 | "winston": "^3.8.1" 20 | }, 21 | "devDependencies": { 22 | "@types/express": "^4.17.13", 23 | "@types/jest": "^28.1.7", 24 | "@types/node": "^18.0.0", 25 | "@types/passport": "^1.0.11", 26 | "@types/react": "18.0.14", 27 | "@types/react-dom": "18.0.5", 28 | "@types/supertest": "^2.0.12", 29 | "@typescript-eslint/eslint-plugin": "^5.33.1", 30 | "@typescript-eslint/parser": "^5.33.1", 31 | "autoprefixer": "^10.4.7", 32 | "eslint": "^8.22.0", 33 | "eslint-config-next": "12.1.6", 34 | "jest": "^28.1.3", 35 | "nodemon": "^2.0.19", 36 | "supertest": "^6.2.4", 37 | "ts-jest": "^28.0.8", 38 | "ts-node": "^10.9.1", 39 | "typescript": "^4.7.4" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /.history/package_20230114163606.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint", 10 | "test": "jest --watch", 11 | "test:ci": "jest --ci" 12 | }, 13 | "proxy": "http://server:5000/", 14 | "dependencies": { 15 | "@emotion/cache": "^11.10.2", 16 | "@emotion/react": "^11.9.3", 17 | "@emotion/server": "^11.10.0", 18 | "@emotion/styled": "^11.9.3", 19 | "@fortawesome/fontawesome-svg-core": "^6.2.0", 20 | "@fortawesome/free-brands-svg-icons": "^6.2.0", 21 | "@fortawesome/free-solid-svg-icons": "^6.2.0", 22 | "@fortawesome/react-fontawesome": "^0.2.0", 23 | "@mui/icons-material": "^5.8.4", 24 | "@mui/material": "^5.8.7", 25 | "@mui/styles": "^5.10.3", 26 | "install": "^0.13.0", 27 | "next": "12.1.6", 28 | "next-themes": "^0.2.1", 29 | "npm": "^8.19.2", 30 | "react": "18.2.0", 31 | "react-dom": "18.2.0", 32 | "react-icons": "^4.4.0", 33 | "react-toggle-dark-mode": "^1.1.0" 34 | }, 35 | "devDependencies": { 36 | "@testing-library/jest-dom": "^5.16.5", 37 | "@testing-library/react": "^13.4.0", 38 | "@testing-library/user-event": "^14.4.3", 39 | "@types/node": "18.0.0", 40 | "@types/react": "18.0.14", 41 | "@types/react-dom": "18.0.5", 42 | "eslint": "8.18.0", 43 | "eslint-config-next": "12.1.6", 44 | "jest": "^29.3.1", 45 | "jest-environment-jsdom": "^29.3.1", 46 | "typescript": "4.7.4" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:16.17.0-alpine 2 | WORKDIR /usr 3 | COPY . . 4 | RUN npm install 5 | EXPOSE ${PORT} 6 | CMD ["npm","run","dev"] -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # **ALIAS CHECK** 2 | 3 | The Alias Check helps confirm the availability of a username on different social networks. While it is intended as a learning project by the [Tech Interviews Nigeria](https://www.meetup.com/technicalinterviews/) that would introduce participants to different technologies in fullstack development, ranging from frontend technologies like [NextJS](https://nextjs.org/) to [NodeJS](https://nodejs.org/en/about/) and [SQLite](https://www.sqlite.org/index.html) or [Postgres](https://www.postgresql.org/) on the backend in addition to [Docker](https://www.docker.com/) for development, its utility is quite apparent. For example, small businesses can see the application in the selection of an available and catchy name among major social media platform. 4 | 5 | This is project is structured so that the developer can choose to set it up with or without Docker. 6 | 7 |
8 | 9 | # **PROJECT SETUP** 10 | 11 | ## **With Docker Compose** 12 | 13 | To start the project using Docker, even from scratch, run the following command: 14 | 15 | ```bash 16 | cp .env.sample .env 17 | docker-compose up 18 | ``` 19 | 20 | Then go to [http://localhost:3000/](http://localhost:3000/) to access the **frontend** or [http://localhost:8080/](http://localhost:8080/) to access the **backend** 21 | 22 | ### **Backend-only Development** 23 | 24 | For **backend developers** that might only need to run the `server` and `database`, run the following command: 25 | 26 | ```bash 27 | docker-compose up server 28 | ``` 29 | 30 | ### **Frontend-only Development** 31 | 32 | For **frontend developers** who might not need access to the backend for the features they want to add, stop other services besides `client` after starting up: 33 | 34 | ```bash 35 | docker-compose up && \ 36 | docker stop $(docker-compose ps --services | grep -v client) 37 | ``` 38 | 39 |
40 | 41 | Checkout docker-compose [documentation](https://docs.docker.com/compose/reference/) on some of the commandline features available. 42 | 43 | ## **Without Docker Compose** 44 | 45 | Though this project was built for easy startup with Docker, it can also be run without Docker. You would need to run the commands on two terminals, one for the _frontend_ and the other for the _backend_: 46 | 47 | ## **Frontend** 48 | 49 | On one terminal, go to the frontend folder named `client`, install dependencies and run the development server: 50 | 51 | ```bash 52 | cd client 53 | npm install 54 | npm run dev 55 | ``` 56 | 57 | You should now be able to see the frontend at [http://localhost:3000/](http://localhost:3000/) 58 | 59 | ## **Backend** 60 | 61 | The backend requires authorization keys from the social media platforms that we support and will increase as time goes by: 62 | 63 | - For twitter :Register for a twitter developer account at [twitter developer account](https://developer.twitter.com/) then create api keys. Of importance is the `Bearer Token` to which on our .env file populate the key `TWITTER_BEARER_TOKEN` 64 | 65 | To start the backend application, make sure you have typescript installed on your system. Checkout [https://www.typescriptlang.org/download](https://www.typescriptlang.org/download). Once installed, run; 66 | 67 | ```bash 68 | cp .env.sample .env 69 | npm install 70 | npm run dev 71 | ``` 72 | 73 | Access the application at the address [http://localhost:8080/health](http://localhost:8080/health) 74 | 75 | ### Testing 76 | 77 | From the root directory; 78 | 79 | ```sh 80 | npm run test 81 | ``` 82 | 83 | ### UI / UX Resources 84 | 85 | You may find some useful resources for improving the UI / UX of the app [here](https://www.figma.com/file/9KXFSDfZzIr9kaCEqpBsc5/Aliascheck%3A-Open-source?node-id=157%3A82). 86 | 87 | ### Architecture 88 | 89 | This is roughly the architecture for the backend 90 | ![backend architecture](architecture/backend.png) 91 | -------------------------------------------------------------------------------- /architecture/backend.dio: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /architecture/backend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KanaryStack/aliascheck/60623b76aa1a41fdb82df0aff3e544da1ed9377c/architecture/backend.png -------------------------------------------------------------------------------- /client/.dockerignore: -------------------------------------------------------------------------------- 1 | Dockerfile 2 | .dockerignore 3 | *.md 4 | node_modules 5 | build -------------------------------------------------------------------------------- /client/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /client/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /client/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to AliasCheck - Frontend (Client) 2 | 3 | ❤ Thank you for your interest to contribute 🎉🎉🎉 4 | 5 | Below are set of guidelines for contributing to AliasCheck and its packages. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request. 6 | 7 | ### TABLE OF CONTENT 8 | 9 | - Code Guidelines 10 | - How to Contribute 11 | - How to Propose A New Issue 12 | - Pull Request Guides 13 | - Fork a Repository - Step by Step 14 | 15 | --- 16 | 17 | ## Code Guidelines 18 | 19 | - Write comprehensive and robust tests that cover the changes you've made in your work. 20 | 21 | * Follow the appropriate code style standards for the language and framework you're using. 22 | * Write readable code – keep functions small and modular and name variables descriptively. 23 | * Document your code thoroughly. 24 | * Make sure all the existing tests pass. 25 | * User-facing code should support the following browsers: 26 | Chrome (Webkit-Blink / 22+), 27 | Firefox (Gecko / 28+), 28 | Edge (Chromium based / 12+), 29 | Opera (Chromium-Blink / 12.1+), 30 | Safari (Apple’s Webkit / 7+), 31 | IE 11 (Trident) 32 | 33 | ## How to Contribute 34 | 35 | Once you've found an issue you'd like to work on, please follow these steps to make your contribution: 36 | 37 | 1. Comment on it and say you're working on that issue. This is to avoid conflicts with others also working on the issue. You will be required to be present for the community standups so as to ensure that the entire team is kept in view of your progress. 38 | > Please note that if you indicate interest and do not show any form of activeness by joining the community standups, and contributing in the available slack channels for 2 weeks, we would assume that you no longer have interest contributing to the selected issue 39 | 2. Submit your pull request and wait for your code review. Be sure to read and follow our pull request guidelines! 40 | 3. Wait for code review and address any issues raised as soon as you can. 41 | 42 | > We encourage people to collaborate as much as possible. When you reviewing each other pull requests be kind and constructive. We especially appreciate contributors reviewing each others pull requests. 43 | 44 | ## How to Propose A New Issue 45 | 46 | If you want to work on something that there is no GitHub issue for, kindly follow these steps: 47 | 48 | - Create a new GitHub issue associated with the relevant repository and propose your change there. Be sure to include implementation details and the rationale for the proposed change. 49 | - We are very reluctant to accept random pull requests without a related issue created first. This would mean that all pull request must be associated with an issue. 50 | - Wait for a project maintainer to evaluate your issue and decide whether it's something that we will accept a pull request for. 51 | - Once the project maintainer has approved the issue you may start work on code as described in the How to contribute section above. 52 | 53 | ## Pull Request Guides 54 | 55 | This guide is for both first time contributors and previous contributors. 56 | 57 | - You are required to create a separate branch for each issue that you're working on. Do not make changes to the default branch of your fork. See how to Fork A Repository 58 | - Push your code once you are done solving the issue or at a stage where you require review of your progress. 59 | - Make a pull request when you can. 60 | > If you are still working on the issue but have opened a draft pull request, please mark the title with a [WIP] 61 | 62 | > Pull Request with a [WIP] title wil not be reviewed. 63 | 64 | > Note that all pull requests must be linked to an issue else it would not be giving attention.. see How to Propose A New Issue section above. 65 | 66 | - Describe your pull request in detail. Too much detail is always better than too little 67 | 68 | > If you are not the author of an issue please tag the actual issue author. using @[author] ( This brings the reporter of the issue into the conversation ) 69 | 70 | - Check the Preview tab to make sure the Markdown is correctly rendered and that all tags and references are linked. If not, go back and edit the Markdown. 71 | 72 | - Once your PR is ready, remove the [WIP] from the title and/or change it from a draft PR to a regular PR. 73 | - If a specific reviewer is not assigned automatically, please request a review from the project maintainer [@simplytunde](https://github.com/simplytunde) and any other interested parties manually 74 | 75 | Backend - [@ChubaOraka](https://github.com/ChubaOraka), [@KiptoonKipkurui](https://github.com/KiptoonKipkurui) 76 | 77 | Frontend - [@Maxwell-ihiaso](https://github.com/Maxwell-ihiaso), [@RWambui](https://github.com/RWambui) 78 | 79 | --- 80 | 81 | - If your PR gets a 'Changes requested' review, you will need to address the feedback and update your PR by pushing to the same branch. You don't need to close the PR and open a new one. 82 | - Be sure to re-request review once you have made changes after a code review. 83 | - Asking for a re-review makes it clear that you addressed the changes that were requested and that it's waiting on the maintainers instead of the other way round. 84 | 85 | ## Fork a Repository 86 | 87 | **Guide to get started with forking a repository** 88 | 89 | 1. On the [Github page for this repository](https://github.com/KanaryStack/aliascheck), click on "Fork" 90 | 91 | 92 | 93 |
94 | 95 | 2. Clone your forked repository to your computer: 96 | 97 | 98 | 99 | ✅run this command inside your terminal: 100 | 101 | ``` 102 | git clone https://github.com/KanaryStack/aliascheck.git 103 | ``` 104 | 105 | see more about [forking]() and [cloning a repo]() 106 | 107 | 3. Shift to project directory: 108 | 109 | ``` 110 | cd aliascheck/client 111 | ``` 112 | 113 | 4. Before making any changes, keep your forked repository in sync to avoid merge conflicts: 114 | 115 | ``` 116 | git remote add upstream https://github.com/KanaryStack/aliascheck.git 117 | git pull upstream main 118 | ``` 119 | 120 | If you run into a merge conflict, you have to resolve the conflict. You can find online guides [here](https://opensource.com/article/20/4/git-merge-conflict) 121 | 122 | 5. after adding the upstream and checking that all files are up to date, you can now create a new branch before editing any files. You can achieve that in two ways: 123 | 124 | ``` 125 | git checkout -b 126 | ``` 127 | 128 | ``` 129 | git branch 130 | git switch 131 | ``` 132 | 133 | 6. On your directory, open text editor and add your changes/components 134 | 135 | 7. Add the changes with git add, git commit ([write a good commit message](https://cbea.ms/git-commit/)); 136 | 137 | ``` 138 | git add src/hero/index.tsx 139 | git commit -m "updated hero component" 140 | ``` 141 | 142 | 8. Push your changes to your repository: 143 | 144 | ``` 145 | git push origin 146 | ``` 147 | 148 | 9. Go to the Github page of your fork, and make a pull request: 149 | 150 | If you want to see more on the [pull request pages](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request) 151 | 152 | 10. Wait for one of the maintainers to merge your pull request. If you experience any conflict, you will be alerted. 153 | 154 | 11. Don't be shy and enjoy creating things together! 155 | -------------------------------------------------------------------------------- /client/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:16-slim 2 | 3 | WORKDIR /usr/src/app/client 4 | 5 | COPY package*.json ./ 6 | 7 | RUN mkdir .next && npm install --legacy-peer-deps 8 | 9 | RUN chown -Rh node:node .next node_modules 10 | 11 | USER node 12 | 13 | EXPOSE 3000 14 | 15 | CMD ["npm", "run", "dev"] -------------------------------------------------------------------------------- /client/README.md: -------------------------------------------------------------------------------- 1 | ### Please see the [CONTIBUTING.md](./CONTRIBUTING.md) if you would like to contribute to this Repo 2 | 3 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 4 | 5 | ## Getting Started 6 | 7 | First, run the development server: 8 | 9 | ```bash 10 | npm run dev 11 | # or 12 | yarn dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 18 | 19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 20 | 21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /client/jest.config.js: -------------------------------------------------------------------------------- 1 | const nextJest = require("next/jest"); 2 | 3 | const createJestConfig = nextJest({ 4 | // Provide the path to your Next.js app to load next.config.js and .env files in your test environment 5 | dir: "./", 6 | }); 7 | 8 | // Add any custom config to be passed to Jest 9 | const customJestConfig = { 10 | setupFilesAfterEnv: ["/jest.setup.js"], 11 | moduleNameMapper: { 12 | // Handle module aliases (this will be automatically configured for you soon) 13 | "^@/components/(.*)$": "/components/$1", 14 | 15 | "^@/pages/(.*)$": "/pages/$1", 16 | }, 17 | testEnvironment: "jest-environment-jsdom", 18 | }; 19 | 20 | // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async 21 | module.exports = createJestConfig(customJestConfig); 22 | -------------------------------------------------------------------------------- /client/jest.setup.js: -------------------------------------------------------------------------------- 1 | // Optional: configure or set up a testing framework before each test. 2 | // If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js` 3 | 4 | // Used for __tests__/testing-library.js 5 | // Learn more: https://github.com/testing-library/jest-dom 6 | import "@testing-library/jest-dom/extend-expect"; 7 | -------------------------------------------------------------------------------- /client/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /client/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | webpackDevMiddleware: config => { 5 | config.watchOptions = { 6 | poll: 1000, 7 | aggregateTimeout: 300, 8 | } 9 | 10 | return config 11 | }, 12 | } 13 | 14 | module.exports = nextConfig 15 | -------------------------------------------------------------------------------- /client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint", 10 | "test": "jest --watch", 11 | "test:ci": "jest --ci" 12 | }, 13 | "proxy": "http://server:5000/", 14 | "dependencies": { 15 | "@emotion/cache": "^11.10.2", 16 | "@emotion/react": "^11.9.3", 17 | "@emotion/server": "^11.10.0", 18 | "@emotion/styled": "^11.9.3", 19 | "@fortawesome/fontawesome-svg-core": "^6.2.0", 20 | "@fortawesome/free-brands-svg-icons": "^6.2.0", 21 | "@fortawesome/free-solid-svg-icons": "^6.2.0", 22 | "@fortawesome/react-fontawesome": "^0.2.0", 23 | "@mui/icons-material": "^5.8.4", 24 | "@mui/material": "^5.8.7", 25 | "@mui/styles": "^5.10.3", 26 | "install": "^0.13.0", 27 | "next": "12.1.6", 28 | "next-themes": "^0.2.1", 29 | "npm": "^8.19.2", 30 | "react": "^18.2.0", 31 | "react-dom": "^18.2.0", 32 | "react-icons": "^4.4.0", 33 | "react-toggle-dark-mode": "^1.1.0" 34 | }, 35 | "devDependencies": { 36 | "@testing-library/jest-dom": "^5.16.5", 37 | "@testing-library/react": "^13.4.0", 38 | "@testing-library/user-event": "^14.4.3", 39 | "@types/node": "18.0.0", 40 | "@types/react": "18.0.14", 41 | "@types/react-dom": "18.0.5", 42 | "eslint": "8.18.0", 43 | "eslint-config-next": "12.1.6", 44 | "jest": "^29.3.1", 45 | "jest-environment-jsdom": "^29.3.1", 46 | "typescript": "4.7.4" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /client/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import { AppProps } from "next/app"; 3 | import PageProvider from "../src/utils/PageProvider"; 4 | import CssBaseline from "@mui/material/CssBaseline"; 5 | import { CacheProvider, EmotionCache, css } from "@emotion/react"; 6 | import createEmotionCache from "../src/utils/createEmotionCache"; 7 | import { ThemeProvider } from "next-themes"; 8 | import { GlobalStyles } from "@mui/material"; 9 | // import Layout from "../src/utils/Layout"; 10 | 11 | // Client-side cache, shared for the whole session of the user in the browser. 12 | const clientSideEmotionCache = createEmotionCache(); 13 | 14 | interface MyAppProps extends AppProps { 15 | emotionCache?: EmotionCache; 16 | } 17 | 18 | export default function MyApp(props: MyAppProps) { 19 | const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; 20 | return ( 21 | // 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 45 | 46 | 47 | 48 | 49 | // 50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /client/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Document, { Html, Head, Main, NextScript } from "next/document"; 3 | // import createEmotionServer from "@emotion/server/create-instance"; 4 | // import createEmotionCache from "../src/utils/createEmotionCache"; 5 | import { ServerStyleSheets } from "@mui/styles"; 6 | import { theme } from "../src/utils/theme"; 7 | 8 | export default class MyDocument extends Document { 9 | render() { 10 | return ( 11 | 12 | 13 | {/* PWA primary color */} 14 | 15 | 16 | 17 | 18 | 22 | {(this.props as any).emotionStyleTags} 23 | 24 | 25 |
26 | 27 | 28 | 29 | ); 30 | } 31 | } 32 | 33 | // `getInitialProps` belongs to `_document` (instead of `_app`), 34 | // it's compatible with static-site generation (SSG). 35 | MyDocument.getInitialProps = async (ctx) => { 36 | // Resolution order 37 | // 38 | // On the server: 39 | // 1. app.getInitialProps 40 | // 2. page.getInitialProps 41 | // 3. document.getInitialProps 42 | // 4. app.render 43 | // 5. page.render 44 | // 6. document.render 45 | // 46 | // On the server with error: 47 | // 1. document.getInitialProps 48 | // 2. app.render 49 | // 3. page.render 50 | // 4. document.render 51 | // 52 | // On the client 53 | // 1. app.getInitialProps 54 | // 2. page.getInitialProps 55 | // 3. app.render 56 | // 4. page.render 57 | 58 | const sheets = new ServerStyleSheets(); 59 | const originalRenderPage = ctx.renderPage; 60 | 61 | // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance. 62 | // However, be aware that it can have global side effects. 63 | // const cache = createEmotionCache(); 64 | // const { extractCriticalToChunks } = createEmotionServer(cache); 65 | 66 | // ctx.renderPage = () => 67 | // originalRenderPage({ 68 | // enhanceApp: (App: any) => 69 | // function EnhanceApp(props) { 70 | // return ; 71 | // }, 72 | // }); 73 | 74 | // const initialProps = await Document.getInitialProps(ctx); 75 | // // This is important. It prevents Emotion to render invalid HTML. 76 | // // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 77 | // const emotionStyles = extractCriticalToChunks(initialProps.html); 78 | // const emotionStyleTags = emotionStyles.styles.map((style) => ( 79 | //