https://github.com/thecodealchemy/hackernews2.0
Suggest more features and issues if found ❤️
https://github.com/thecodealchemy/hackernews2.0
hacker-news-clone hackernews hackernews-api hackernews-client hackernews-clone open-source tailwind-css tailwindcss
Last synced: 3 months ago
JSON representation
Suggest more features and issues if found ❤️
- Host: GitHub
- URL: https://github.com/thecodealchemy/hackernews2.0
- Owner: thecodealchemy
- License: mit
- Created: 2025-01-23T09:41:38.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2025-01-30T10:37:25.000Z (5 months ago)
- Last Synced: 2025-02-10T16:58:31.133Z (5 months ago)
- Topics: hacker-news-clone, hackernews, hackernews-api, hackernews-client, hackernews-clone, open-source, tailwind-css, tailwindcss
- Language: TypeScript
- Homepage: https://hackernewspro.netlify.app/
- Size: 228 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HackerNews 2.0
HackerNews 2.0 is a modern, responsive web application that provides an improved interface for browsing Hacker News stories. The app allows users to explore top, new, and best stories, view detailed comments, and check user profiles with a sleek dark/light mode switch.
## Features
- 🔥 View Top, New, and Best Hacker News stories.
- 💬 Expand story comments with nested replies.
- 👤 View user profiles and their submissions.
- 🌗 Dark/Light mode toggle.
- 🔄 Refresh stories with ease.
- 📱 Fully responsive design.
## Demo
[Live Demo](https://hackernewspro.netlify.app/)
## Installation
Follow these steps to set up the project locally:
```bash
# Clone the repository
git clone https://github.com/thecodealchemy/HackerNews2.0.git
# Navigate to the project directory
cd HackerNews2.0
# Install dependencies
npm install
# Start the development server
npm run dev
```
The app should now be running at `http://localhost:5173` (default Vite dev server).
## Technologies Used
- **React** – Frontend framework.
- **TypeScript** – Strongly typed JavaScript.
- **TailwindCSS** – Utility-first styling.
- **Firebase Hacker News API** – Data source.
- **Vite** – Build tool for fast development.
## Folder Structure
```
HackerNews2.0/
├── public/ # Static assets
├── src/
│ ├── components/ # UI components
│ ├── pages/ # Page components
│ ├── hooks/ # Custom hooks
│ ├── styles/ # Tailwind styles
│ ├── types/ # TypeScript types
│ ├── utils/ # Helper functions
│ ├── App.tsx # Main app component
│ ├── main.tsx # React entry point
│ └── index.css # Global styles
├── .gitignore
├── package.json
├── README.md
└── vite.config.ts
```
## Usage
1. **Select Story Type:** Choose between top, new, and best stories from the navigation.
2. **View Comments:** Click on a story to see its comments.
3. **Check User Profiles:** Click on a username to view their details.
4. **Dark Mode Toggle:** Use the header button to switch between dark/light mode.
## API Reference
This project uses the [Hacker News API](https://github.com/HackerNews/API):
- Fetch stories: `https://hacker-news.firebaseio.com/v0/{storyType}stories.json`
- Fetch individual story: `https://hacker-news.firebaseio.com/v0/item/{id}.json`
- Fetch user data: `https://hacker-news.firebaseio.com/v0/user/{username}.json`
## Contributing
Contributions are welcome! Feel free to open issues and submit pull requests.
### Steps to Contribute:
1. Fork the repository.
2. Create a new branch (`feature/awesome-feature`).
3. Commit your changes.
4. Push to your fork and submit a PR.
## License
This project is licensed under the MIT License.
## Contact
For any inquiries or suggestions, reach out at [thecodealchemy](https://github.com/thecodealchemy).