Reddit Acorn

abhisheksharmacodes

Its a clone of reddit dashboard with pixel perfect user interface, which loads posts using Reddit API. User can search topics to get reddit posts. This project was build using React JS and Tailwind CSS.

#css3 #html-css-javascript #html5 #javascript #reactjs #reddit-api #tailwindcss

Demo Download

Acorn Project

File Structure

src/
|-- assets/
|   |-- icons/
|   |   |-- all.svg
|   |   |-- brightness.svg
|   |   |-- home.svg
|   |   |-- message.svg
|   |   |-- more.svg
|   |   |-- notify.svg
|   |   |-- notify_gray.svg
|   |   |-- popular.svg
|   |   |-- search.svg
|   |   |-- share.svg
|   |-- user.png
|   |-- logo.png
|   |-- thumbnail.jpg
|-- components/
|   |-- Header.jsx
|   |-- contentarea/
|       |-- ContentArea.jsx
|       |-- comps/
|           |-- Post.jsx
|-- context/
|-- App.jsx
|-- App.css

Installation

Clone the repository:

git clone https://github.com/yourusername/acorn.git

Navigate to the project directory:
```
cd acorn
```
Install dependencies:
```
npm install
```

Usage

Start the development server:
```
npm start
```
Open your browser and navigate to http://localhost:3000.

Components

The Header component contains the navigation bar with links to different sections and a search bar.

ContentArea

The ContentArea component displays the main content of the application, including posts.

Post

The Post component represents an individual post with details such as title, author, time, comments, and shares.

Context

The application uses React Context to manage the search state across components.

Styling

The application uses Tailwind CSS for styling. Custom styles are defined in App.css.

License

This project is licensed under the MIT License.

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce