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
### π License
Licensed under [MIT](./LICENSE)