Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jcarloslucio/twiclone-frontend
The frontend for Twiclone (A Twitter clone)
https://github.com/jcarloslucio/twiclone-frontend
axios mui react-query reactjs vitejs
Last synced: about 2 months ago
JSON representation
The frontend for Twiclone (A Twitter clone)
- Host: GitHub
- URL: https://github.com/jcarloslucio/twiclone-frontend
- Owner: JCarlosLucio
- Created: 2021-08-21T22:59:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T03:06:11.000Z (11 months ago)
- Last Synced: 2024-02-29T03:39:24.312Z (10 months ago)
- Topics: axios, mui, react-query, reactjs, vitejs
- Language: JavaScript
- Homepage: https://twiclone.pages.dev/
- Size: 1.96 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌪️ Twiclone Frontend
[](https://github.com/JCarlosLucio/twiclone-frontend#readme)
> The frontend for Twiclone (a Twitter clone).
> The backend can be found
> [here](https://github.com/JCarlosLucio/twiclone-backend).
## ✨ Demo
[](https://twiclone.pages.dev/)
## 📜 Docs
To run add a `.env` file with the environment variables from `.env.example`.
Also make sure
[twiclone's server](https://github.com/JCarlosLucio/twiclone-backend) is
running.
### Prerequisites
- node >= 16.0
### Install
```sh
npm install
```
### Build
Builds the app for production to the `dist` folder.
```sh
npm run build
```
### Develop
Runs the app in development mode. Opens
[http://localhost:5173/](http://localhost:5173/) to view it in the browser.
```sh
npm run dev
```
### Preview
Locally preview the production build. Open
[http://localhost:3000/](http://localhost:3000/) to view it in the browser.
```sh
npm run preview
```
### Lint
Runs eslint to fix linting errors.
```sh
npm run lint
```
### Format
Format the application with prettier.
```sh
npm run format
```
## 🚀 Deployment
Deployed to [Cloudflare Pages](https://pages.cloudflare.com/).
1. `Connect to Git` in **Cloudflare Dashboard > Workers & Pages > Pages**.
2. Pick your `Git` hosting service. ex. `GitHub` / `Gitlab`.
3. Select your repository.
4. Pick your `Project name`.
5. Select the corresponding `Framework preset` in the build setting.
6. Add `Build command` ex. `npm run build`.
7. Add `Build output directory` ex. `dist`.
8. Add `Environment variables` from `.env.example`.
9. Deploy site.
10. Setup a Custom domain in **Custom domains**.
[More on deployment to Cloudflare Pages...](https://vitejs.dev/guide/static-deploy.html#cloudflare-pages)
### Triggering a Deploy
Deploys are triggered on `push` or `pull_request` merge to `master` branch.
## 📖 Lessons Learned
- Setting up services to consume Twiclone's API with
[Axios](https://axios-http.com/).
- Using [React Query](https://tanstack.com/query/latest) for asynchronous state
management.
- Styling and Theming the application with [MUI](https://mui.com/).
- Adding dark mode using [MUI](https://mui.com/), and
[ContextAPI](https://react.dev/learn/passing-data-deeply-with-context).
- Migrating from [CRA](https://create-react-app.dev/) to
[Vite](https://vitejs.dev/).
- Setting up the app to be a [PWA](https://web.dev/progressive-web-apps/) with
[VitePWA](https://github.com/vite-pwa/vite-plugin-pwa).
## ✏️ TODO
- ~~Deploy to [Cloudflare Pages](https://pages.cloudflare.com/)
/[GitHub Pages](https://pages.github.com/).~~
- ~~Migrate deployment from [Netlify](https://www.netlify.com/) to
[Cloudflare Pages](https://pages.cloudflare.com/)~~
- ~~Upgrade to the latest
[@tanstack/react-query](https://tanstack.com/query/latest/docs/react/overview)
package.~~
- Add e2e tests with [Playwright](https://playwright.dev/) or
[Cypress](https://www.cypress.io/).
- Migrate to [Typescript](https://www.typescriptlang.org/).
## Author
👤 **Juan Carlos Lucio**
- Github: [@JCarlosLucio](https://github.com/JCarlosLucio)