DeepNews

Live Preview

https://hotnewnews.netlify.app/

DeepNews is a modern, responsive news application built with React, TypeScript, and Tailwind CSS. It provides a seamless experience for browsing articles, exploring categories, and staying updated with trending news.

Features

• Responsive Design: Optimized for various screen sizes, from mobile to desktop.
• Article Grid: Displays news articles in an intuitive and visually appealing grid layout.
• Category Filtering: Easily filter articles by different categories.
• Trending News: Dedicated section to discover the most popular and trending articles.
• Search Functionality: Quickly find articles using keywords.
• Newsletter Subscription: Stay informed with the latest updates by subscribing to the newsletter.
• User Authentication: Secure login and signup functionality.
• Modal Components: Interactive modals for search, authentication, and article details.
• Smooth Scrolling: Enhanced user experience with smooth transitions.

Technologies Used

• React: A JavaScript library for building user interfaces.
• TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
• Vite: A fast build tool that provides an extremely fast development experience.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
• React Router DOM: Declarative routing for React.
• date-fns: A modern JavaScript date utility library.
• framer-motion: A production-ready motion library for React.
• lucide-react: A collection of beautiful open-source icons.

Installation

To get a local copy up and running, follow these simple steps.

Prerequisites

Make sure you have Node.js and npm (or yarn) installed on your machine.

• Node.js (LTS version recommended)
• npm (comes with Node.js) or Yarn

Clone the repository

git clone https://github.com/your-username/deepnews.git
cd deepnews

Install dependencies

npm install
# or
yarn install

Environment Variables

Create a .env file in the root of the project based on .env.example and add your environment variables. For example:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Run the development server

npm run dev
# or
yarn dev

This will start the development server at http://localhost:5173.

Usage

Once the application is running, you can:

• Browse articles on the homepage.
• Navigate to the "Categories" page to filter articles.
• Check out the "Trending" section for popular news.
• Use the search icon to find specific articles.
• Sign up or log in to access personalized features.
• Subscribe to the newsletter for updates.

Project Structure

.bolt/
public/
src/
├── components/
├── contexts/
├── data/
├── hooks/
├── lib/
├── pages/
├── types/
├── App.tsx
├── index.css
├── main.tsx
├── vite-env.d.ts
.env.example
eslint.config.js
index.html
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
vite.config.ts

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
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. See LICENSE for more information.

Contact

Your Name - your_email@example.com Project Link: https://github.com/your-username/deepnews