https://github.com/matheus1714/ignite-project-feed-page
https://github.com/matheus1714/ignite-project-feed-page
css-module feed ignite ignite-rocketseat rocketseat typescript
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/matheus1714/ignite-project-feed-page
- Owner: Matheus1714
- Created: 2023-08-12T23:48:57.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-15T04:01:43.000Z (almost 3 years ago)
- Last Synced: 2025-01-17T08:37:38.519Z (over 1 year ago)
- Topics: css-module, feed, ignite, ignite-rocketseat, rocketseat, typescript
- Language: TypeScript
- Homepage: https://ignite-project-feed-page.vercel.app
- Size: 2.67 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Ignite Feed](https://ignite-project-feed-page.vercel.app/) 🚀
This is a project created using the concepts learned in [Rocketseat's](https://www.rocketseat.com.br/) classes in the Ignite program for a comments feed.
## Design
This Front-end project was developed based on the design proposed in [Figma](https://www.figma.com/file/QUu1Ge0qogrBEN95ov77Mg/Ignite-Feed-(Community)?type=design&node-id=0%3A1&mode=design&t=XSHWfaJ2thJ4E1tE-1).
## Technologies
This project was developed using Vite + ReactJS, Typescript.
The project dependencies were:
```json
"dependencies": {
"@phosphor-icons/react": "^2.0.10",
"date-fns": "^2.30.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
}
```
## Run Project
Run the installation of dependencies with:
```shell
npm i
```
Run the exe project using the command:
```shell
npm run dev
```
😝 Enjoy!!
## What I Learned with This Project?
### Create a global file to CSS
Having a global file (`global.css`) that has standardized colors in a single file helps a lot with standardizing colors in the project and changing themes in the future.
```css
:root{
---white: #ffffff;
--gray-100: #e1e1e6;
--gray-300: #c4c4cc;
--gray-400: #8d8d99;
--gray-600: #323238;
--gray-700: #29292e;
--gray-800: #202024;
--gray-900: #121214;
--green-300: #00B37E;
--green-500: #00875f;
--red-500: #F75A68;
}
```
### Key's in React
Using Keys in react helps react in optimizing the rendering of the component on the page, so choosing a key with a unique value is essential.
```ts
...
{comments.map(comment => {
return (
)
})}
...
```
### Imutability
In immutability, the variables do not change, a new value is created (a new space in the memory) for the variable.
Within React immutability allows for a performance boost. React looks at variables that have changed and it performs better.
A good example of this is in the comment deletion function, in which you must change and redo the list with the comment that has changed.
```ts
function deleteComment(commentToDelete: string){
const commentsWithoutDeleteOne = comments.filter(comment => {
return comment !== commentToDelete
})
setComments(commentsWithoutDeleteOne)
}
```
### Typescript
Using `Typescript` helps a lot in project development in React. Variable typing helps the developer to avoid problems during development. `Interface` development helps a lot.
```ts
export interface AuthorType{
name: string
role: string
avatarUrl: string
}
```
## Acknowledgment
Thanks to Rocketseat for the content and initiatives it provides.🚀