Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/venkateshramkumarg/pintrest-frontend
Pinterest is a user-friendly task management application built with React. It helps you organize your tasks by creating and tracking them in a simple interface. You can install the dependencies and run the app locally to start using it.
https://github.com/venkateshramkumarg/pintrest-frontend
nodejs pinterest-clone reactjs tailwindcss typescript
Last synced: 16 days ago
JSON representation
Pinterest is a user-friendly task management application built with React. It helps you organize your tasks by creating and tracking them in a simple interface. You can install the dependencies and run the app locally to start using it.
- Host: GitHub
- URL: https://github.com/venkateshramkumarg/pintrest-frontend
- Owner: venkateshramkumarg
- License: mit
- Created: 2024-08-13T06:02:26.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-21T22:56:04.000Z (5 months ago)
- Last Synced: 2024-11-05T22:35:28.610Z (2 months ago)
- Topics: nodejs, pinterest-clone, reactjs, tailwindcss, typescript
- Language: JavaScript
- Homepage:
- Size: 197 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Pintrest
Welcome to the Pintrest! This project is a simple and intuitive task management application built with React. It helps you keep track of your tasks and stay organized.
## Table of Contents
- [Getting Started](#getting-started)
- [Project Structure](#project-structure)
- [Available Scripts](#available-scripts)
- [Dependencies](#dependencies)
- [Learn More](#learn-more)
## Getting Started
To get started with the project, follow these steps:
1. **Clone the repository**:
```sh
git clone https://github.com/venkateshramkumarg/Pintrest-Frontend.git
cd todo
```
2. **Install dependencies**:
```sh
npm install
```
3. **Run the app**:
```sh
npm start
```
This will start the development server and open the app in your default browser at [http://localhost:3000](http://localhost:3000). The page will automatically reload if you make changes to the code.
## Project Structure
Here's a quick overview of the project's structure:
- **public/**: Contains static files like `index.html`, `manifest.json`, and `robots.txt`.
- **src/**: Contains the React components and styles.
- `About.js`: Component for the About page.
- `App.css`: Global styles for the app.
- `App.js`: Main component that sets up the app.
- `Body.js`: Component for the main content area.
- `Create.js`: Component for creating new tasks.
- `Header.js`: Component for the header section.
- `index.css`: Global CSS styles.
- `index.js`: Entry point for the React app.
- `WatchList.js`: Component for displaying the watch list.
- **tailwind.config.js**: Configuration file for Tailwind CSS.
## Available Scripts
In the project directory, you can run the following scripts:
### [`npm start`](command:_github.copilot.openSymbolFromReferences?%5B%22npm%20start%22%2C%5B%7B%22uri%22%3A%7B%22%24mid%22%3A1%2C%22fsPath%22%3A%22c%3A%5C%5CVS%20CODE%5C%5CReact%5C%5CReact%5C%5CPintrest%20Frontend%5C%5Cpackage.json%22%2C%22_sep%22%3A1%2C%22external%22%3A%22file%3A%2F%2F%2Fc%253A%2FVS%2520CODE%2FReact%2FReact%2FPintrest%2520Frontend%2Fpackage.json%22%2C%22path%22%3A%22%2Fc%3A%2FVS%20CODE%2FReact%2FReact%2FPintrest%20Frontend%2Fpackage.json%22%2C%22scheme%22%3A%22file%22%7D%2C%22pos%22%3A%7B%22line%22%3A16%2C%22character%22%3A5%7D%7D%5D%5D "Go to definition")
Runs the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser. The page will reload when you make changes. You may also see any lint errors in the console.
### [`npm test`](command:_github.copilot.openSymbolFromReferences?%5B%22npm%20test%22%2C%5B%7B%22uri%22%3A%7B%22%24mid%22%3A1%2C%22fsPath%22%3A%22c%3A%5C%5CVS%20CODE%5C%5CReact%5C%5CReact%5C%5CPintrest%20Frontend%5C%5Cpackage.json%22%2C%22_sep%22%3A1%2C%22external%22%3A%22file%3A%2F%2F%2Fc%253A%2FVS%2520CODE%2FReact%2FReact%2FPintrest%2520Frontend%2Fpackage.json%22%2C%22path%22%3A%22%2Fc%3A%2FVS%20CODE%2FReact%2FReact%2FPintrest%20Frontend%2Fpackage.json%22%2C%22scheme%22%3A%22file%22%7D%2C%22pos%22%3A%7B%22line%22%3A5%2C%22character%22%3A6%7D%7D%5D%5D "Go to definition")
Launches the test runner in interactive watch mode. For more information, see the [running tests](https://facebook.github.io/create-react-app/docs/running-tests) section.
### [`npm run build`](command:_github.copilot.openSymbolFromReferences?%5B%22npm%20run%20build%22%2C%5B%7B%22uri%22%3A%7B%22%24mid%22%3A1%2C%22fsPath%22%3A%22c%3A%5C%5CVS%20CODE%5C%5CReact%5C%5CReact%5C%5CPintrest%20Frontend%5C%5Cpackage.json%22%2C%22_sep%22%3A1%2C%22external%22%3A%22file%3A%2F%2F%2Fc%253A%2FVS%2520CODE%2FReact%2FReact%2FPintrest%2520Frontend%2Fpackage.json%22%2C%22path%22%3A%22%2Fc%3A%2FVS%20CODE%2FReact%2FReact%2FPintrest%20Frontend%2Fpackage.json%22%2C%22scheme%22%3A%22file%22%7D%2C%22pos%22%3A%7B%22line%22%3A17%2C%22character%22%3A5%7D%7D%5D%5D "Go to definition")
Builds the app for production to the [`build`](command:_github.copilot.openSymbolFromReferences?%5B%22build%22%2C%5B%7B%22uri%22%3A%7B%22%24mid%22%3A1%2C%22fsPath%22%3A%22c%3A%5C%5CVS%20CODE%5C%5CReact%5C%5CReact%5C%5CPintrest%20Frontend%5C%5Cpackage.json%22%2C%22_sep%22%3A1%2C%22external%22%3A%22file%3A%2F%2F%2Fc%253A%2FVS%2520CODE%2FReact%2FReact%2FPintrest%2520Frontend%2Fpackage.json%22%2C%22path%22%3A%22%2Fc%3A%2FVS%20CODE%2FReact%2FReact%2FPintrest%20Frontend%2Fpackage.json%22%2C%22scheme%22%3A%22file%22%7D%2C%22pos%22%3A%7B%22line%22%3A17%2C%22character%22%3A5%7D%7D%5D%5D "Go to definition") folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified, and the filenames include the hashes. Your app is ready to be deployed!
### [`npm run eject`](command:_github.copilot.openSymbolFromReferences?%5B%22npm%20run%20eject%22%2C%5B%7B%22uri%22%3A%7B%22%24mid%22%3A1%2C%22fsPath%22%3A%22c%3A%5C%5CVS%20CODE%5C%5CReact%5C%5CReact%5C%5CPintrest%20Frontend%5C%5Cpackage.json%22%2C%22_sep%22%3A1%2C%22external%22%3A%22file%3A%2F%2F%2Fc%253A%2FVS%2520CODE%2FReact%2FReact%2FPintrest%2520Frontend%2Fpackage.json%22%2C%22path%22%3A%22%2Fc%3A%2FVS%20CODE%2FReact%2FReact%2FPintrest%20Frontend%2Fpackage.json%22%2C%22scheme%22%3A%22file%22%7D%2C%22pos%22%3A%7B%22line%22%3A19%2C%22character%22%3A5%7D%7D%5D%5D "Go to definition")
**Note: this is a one-way operation. Once you [`eject`](command:_github.copilot.openSymbolFromReferences?%5B%22eject%22%2C%5B%7B%22uri%22%3A%7B%22%24mid%22%3A1%2C%22fsPath%22%3A%22c%3A%5C%5CVS%20CODE%5C%5CReact%5C%5CReact%5C%5CPintrest%20Frontend%5C%5Cpackage.json%22%2C%22_sep%22%3A1%2C%22external%22%3A%22file%3A%2F%2F%2Fc%253A%2FVS%2520CODE%2FReact%2FReact%2FPintrest%2520Frontend%2Fpackage.json%22%2C%22path%22%3A%22%2Fc%3A%2FVS%20CODE%2FReact%2FReact%2FPintrest%20Frontend%2Fpackage.json%22%2C%22scheme%22%3A%22file%22%7D%2C%22pos%22%3A%7B%22line%22%3A19%2C%22character%22%3A5%7D%7D%5D%5D "Go to definition"), you can't go back!** This command will remove the single build dependency from your project, copying all the configuration files and transitive dependencies (webpack, Babel, ESLint, etc.) directly into your project so you have full control over them. All the commands except [`eject`](command:_github.copilot.openSymbolFromReferences?%5B%22eject%22%2C%5B%7B%22uri%22%3A%7B%22%24mid%22%3A1%2C%22fsPath%22%3A%22c%3A%5C%5CVS%20CODE%5C%5CReact%5C%5CReact%5C%5CPintrest%20Frontend%5C%5Cpackage.json%22%2C%22_sep%22%3A1%2C%22external%22%3A%22file%3A%2F%2F%2Fc%253A%2FVS%2520CODE%2FReact%2FReact%2FPintrest%2520Frontend%2Fpackage.json%22%2C%22path%22%3A%22%2Fc%3A%2FVS%20CODE%2FReact%2FReact%2FPintrest%20Frontend%2Fpackage.json%22%2C%22scheme%22%3A%22file%22%7D%2C%22pos%22%3A%7B%22line%22%3A19%2C%22character%22%3A5%7D%7D%5D%5D "Go to definition") will still work, but they will point to the copied scripts so you can tweak them.
## Dependencies
Here are some of the key dependencies used in this project:
- **React**: A JavaScript library for building user interfaces.
- **React Router DOM**: A collection of navigational components for React.
- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.
For a complete list of dependencies, check the [`package.json`](command:_github.copilot.openRelativePath?%5B%7B%22scheme%22%3A%22file%22%2C%22authority%22%3A%22%22%2C%22path%22%3A%22%2Fc%3A%2FVS%20CODE%2FReact%2FReact%2FPintrest%20Frontend%2Fpackage.json%22%2C%22query%22%3A%22%22%2C%22fragment%22%3A%22%22%7D%5D "c:\VS CODE\React\React\Pintrest Frontend\package.json") file.
## Learn More
To learn more about Create React App, check out the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn more about React, check out the [React documentation](https://reactjs.org/).
### Additional Resources
- [Code Splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
- [Analyzing the Bundle Size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
- [Making a Progressive Web App](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
- [Advanced Configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
- [Deployment](https://facebook.github.io/create-react-app/docs/deployment)
- [Troubleshooting [`npm run build`](command:_github.copilot.openSymbolFromReferences?%5B%22npm%20run%20build%22%2C%5B%7B%22uri%22%3A%7B%22%24mid%22%3A1%2C%22fsPath%22%3A%22c%3A%5C%5CVS%20CODE%5C%5CReact%5C%5CReact%5C%5CPintrest%20Frontend%5C%5Cpackage.json%22%2C%22_sep%22%3A1%2C%22external%22%3A%22file%3A%2F%2F%2Fc%253A%2FVS%2520CODE%2FReact%2FReact%2FPintrest%2520Frontend%2Fpackage.json%22%2C%22path%22%3A%22%2Fc%3A%2FVS%20CODE%2FReact%2FReact%2FPintrest%20Frontend%2Fpackage.json%22%2C%22scheme%22%3A%22file%22%7D%2C%22pos%22%3A%7B%22line%22%3A17%2C%22character%22%3A5%7D%7D%5D%5D "Go to definition") fails to minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
Happy coding!