https://github.com/rafaumeu/fundamentos-reactjs
🚀 Ignite Feed: A web app built with React & Vite to explore fundamentals like functional components, state management, and responsive design. Users can view posts, comment, and interact. This is the first step in my React learning journey. Feedback and contributions are welcome!
https://github.com/rafaumeu/fundamentos-reactjs
Last synced: 3 months ago
JSON representation
🚀 Ignite Feed: A web app built with React & Vite to explore fundamentals like functional components, state management, and responsive design. Users can view posts, comment, and interact. This is the first step in my React learning journey. Feedback and contributions are welcome!
- Host: GitHub
- URL: https://github.com/rafaumeu/fundamentos-reactjs
- Owner: rafaumeu
- Created: 2024-12-08T20:33:26.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-01-06T23:23:55.000Z (5 months ago)
- Last Synced: 2025-01-26T19:16:56.109Z (4 months ago)
- Language: TypeScript
- Homepage: https://fundamentos-reactjs-rho.vercel.app
- Size: 184 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Ignite Feed 🚀
## 🖍️ Project Description
Ignite Feed is a dynamic web application developed with React, TypeScript, and Vite, designed to simulate a social media feed where users can create, interact with posts, and leave comments. The project focuses on applying React fundamentals, TypeScript typing, and creating an engaging user interface.
## 📸 Screenshots
### Desktop View
### Mobile View
## 🛠️ Key Features Implemented
* 📭 Dynamic post rendering
* 👤 User profile display
* 💬 Interactive comment system
* 👍 Like/Applaud functionality
* 🕒 Timestamp formatting
* 🗑️ Comment deletion
* 🔤 Strong TypeScript typing
## 🌟 Project Highlights
* Modular component structure
* State management with React Hooks
* Responsive design
* CSS Modules for styling
* Date manipulation with date-fns
* Type-safe development with TypeScript
## 🚀 Technologies Used
* React 18
* TypeScript
* Vite
* CSS Modules
* date-fns
* Phosphor Icons
## 🔜 Upcoming Improvements
* [x] TypeScript integration
* [ ] Persistent storage
* [ ] User authentication
* [ ] Backend integration
* [ ] Enhanced state management with Redux/Context API
## 🚀 Quick Start
1. Clone the repository
2. Install dependencies: `npm install`
3. Run development server: `npm run dev`
4. Open ****
## 📊 Project Structure
```
src/
│
├── components/
│ ├── Avatar/
│ ├── Comment/
│ ├── Header/
│ ├── Post/
│ └── Sidebar/
│
├── styles/
│ └── global.css
│
├── App.tsx
└── main.tsx
```
## 🌐 Key Learnings
* React Hooks (useState)
* Component composition
* Immutable state updates
* Form handling
* TypeScript integration
* Date formatting
* Responsive design principles
## 👥 Contribution
Contributions are welcome!
1. Fork the repository
2. Create your feature branch: `git checkout -b feature/AmazingFeature`
3. Commit your changes: `git commit -m 'Add some AmazingFeature'`
4. Push to the branch: `git push origin feature/AmazingFeature`
5. Open a Pull Request
## 📜 License
Distributed under the MIT License.
## 📞 Contact
Rafael Dias
* GitHub: [@rafaumeu](https://github.com/rafaumeu)
* Linkedin: [Rafael Dias Zendron](https://www.linkedin.com/in/rafael-dias-zendron-528290132/)
Made with ❤️ and 🚀 by Rafael Dias