Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mar-alv/ignite-github-blog
3rd ReactJs challenge of Ignite, Rocketseat's programming course, a blog interface like of your GitHub profile, where the posts are your issues
https://github.com/mar-alv/ignite-github-blog
challenge css html javascript jest js react react-testing-library rocketseat storybook styled-components ts typescript vite
Last synced: about 1 month ago
JSON representation
3rd ReactJs challenge of Ignite, Rocketseat's programming course, a blog interface like of your GitHub profile, where the posts are your issues
- Host: GitHub
- URL: https://github.com/mar-alv/ignite-github-blog
- Owner: mar-alv
- License: mit
- Created: 2023-10-08T22:23:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-14T16:04:56.000Z (2 months ago)
- Last Synced: 2024-12-14T17:18:38.890Z (2 months ago)
- Topics: challenge, css, html, javascript, jest, js, react, react-testing-library, rocketseat, storybook, styled-components, ts, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 42.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Ignite GitHub Blog
[](https://opensource.org/licenses/MIT)
[🎨 Design](https://www.figma.com/file/9n2ccyeFz0vWsJ6Dcx5JuR/GitHub-Blog-(Community)?type=design&node-id=2-12&mode=design&t=IjiuQjVEQfwG7ASw-0)
[🇧🇷 Português](./docs/README-pt.md)
## 📚 Summary
- [❕ About](#about)
- [📖 Instructions](#instructions)
- [📥 Install](#install)
- [🚀 Run Locally](#locally)
- [📋 Run Unit Tests](#unit-tests)
- [📔 Run Storybook](#storybook)
- [📂 Structure](#structure)
- [🧰 Technologies](#technologies)
- [📸 Screenshots and 🎥 Recordings](#screenshots-prints)
- [👤 Author](#author)
- [📄 License](#license)
### ❕ About
This is my implementation of the challenge project "GitHub Blog" from the third ReactJS module of [Ignite](https://www.rocketseat.com.br/ignite), an intermediate and advanced course in various programming languages and technologies offered by [Rocketseat](https://www.rocketseat.com.br/).
It implements the following functionalities, which will be demonstrated in photos and videos later on:
#### **Home screen**
- **User search:** Search for users on GitHub to show its info, repositories and issues
- **Show user's info:** Show user's info like profile image, name, description, nick, company and followers quantity
- **Repository selection:** List the user's public repositories e allows selecting from which the issues will be listed
- **Issues listing:** Shows all issues of the selected repository
- **Issues search:** Filters issues based on subtexts present in the title or body of it
#### **Issue screen**
- **Issue description:** Shows the complete and formatted description of the issue, when it was posted and how many comments it has
- **Issue's comments:** List the comments posted in the issue
### 📖 Instructions
#### 📥 Install
Paste the 1º command into a terminal opened within a folder of your preference to clone the project
```sh
git clone https://github.com/mar-alv/ignite-coffee-delivery.git
```
Then run one of the versions of the 2º command to install the dependencies
```sh
npm i
```
```sh
npm install
```
#### 🚀 Run Locally
Paste the command into a terminal, the application will be accessable through this [link](http://localhost:5173)
```sh
npm run dev
```
#### 📋 Run Unit Tests
Paste the command into a terminal, they will be exectued one after the other mentioning if there were failed tests
```sh
npm run tests
```
#### 📔 Run Storybook
Paste the command into a terminal, the project's components documentation will be accessible through this [link](http://localhost:6006)
```sh
npm run storybook
```
### 📂 Structure
```
│ __mocks__/
│ └── ...
│ .github/
│ └── ...
│ .storybook/
│ └── ...
│ .tests/
│ └── ...
│ docs/
│ └── ...
│ src/
│ ├── @types/
│ │ └── ...
│ ├── assets/
│ │ └── ...
│ ├── components/
│ │ ├── context x/
│ │ │ ├── component y/
│ │ │ │ └── ...
│ │ │ └── ...
│ │ └── ...
│ ├── context/
│ │ └── ...
│ ├── interfaces/
│ │ ├── context x/
│ │ │ └── ...
│ │ └── ...
│ ├── libs/
│ │ └── ...
│ ├── mappers/
│ │ └── ...
│ ├── pages/
│ │ ├── page x/
│ │ │ ├── component y/
│ │ │ └── └── ...
│ │ └── ...
│ ├── services/
│ │ └── ...
│ ├── styles/
│ │ └── ...
│ ├── utils/
│ │ └── ...
│ └── ...
│ stories/
│ ├── components/
│ │ ├── context x/
│ │ │ └── ...
│ │ └── ...
│ └── ...
│ tests/
│ ├── context x/
│ │ └── ...
│ └── ...
```
### 🧰 Technologies
#### Build Tools
[](https://vitejs.dev/)
#### Documentation
[](https://storybook.js.org/)
#### Front-end Framework
[](https://reactjs.org/)
[](https://reactrouter.com/en/main)
[](https://www.typescriptlang.org/)
#### Styling
[](https://fontawesome.com/)
[](https://styled-components.com/)
#### Utilities
[](https://react-hook-form.com/)
[](https://github.com/remarkjs/react-markdown)
[](https://zod.dev/)
#### Testing
[](https://jestjs.io/)
[](https://testing-library.com/docs/react-testing-library/intro)
### 📸 Screenshots and 🎥 Recordings
For a longer video demonstration click here and like my post on [LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:7195123027691368449/)
User search
Home page
Home page mobile
Issue page
Issue page mobile
Issues search
Generic stories
Common component stories
Search component stories
### 👤 Author
Marcelo Alvarez
Front-end Developer
"Some AI generated funny quote here 😗"
### 📄 License
Licensed under [MIT](./LICENSE)