https://github.com/techstarhub/quotes
Random quote generator web app
https://github.com/techstarhub/quotes
css express good-first-project html quotes-generator react vite
Last synced: 6 months ago
JSON representation
Random quote generator web app
- Host: GitHub
- URL: https://github.com/techstarhub/quotes
- Owner: TechStarHub
- License: mit
- Created: 2023-11-11T14:28:36.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-09T13:31:36.000Z (almost 2 years ago)
- Last Synced: 2025-04-23T05:45:16.664Z (6 months ago)
- Topics: css, express, good-first-project, html, quotes-generator, react, vite
- Language: JavaScript
- Homepage:
- Size: 95.7 KB
- Stars: 0
- Watchers: 1
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Quotes
A simple web app that displays random quotes from a list of quotes.
# Table of Contents
- [Table of Contents](#table-of-contents)
- [Introduction 🎉](#introduction-)
- [Purpose ⚡](#purpose-)
- [Pre-requisites ✅](#pre-requisites-)
- [Technologies 💻](#technologies-)
- [Figma Design 🎨](#figma-design-)
- [Contributing 💡](#contributing-)
- [Installation 🛠️](#installation-️)
- [Frontend Installation](#frontend-installation)
- [Backend Installation](#backend-installation)
## Introduction 🎉
This is a simple web app that displays random quotes from a list of quotes. It is a beginner friendly project and a good way to learn JavaScript.
## Purpose ⚡
The purpose of this project is to help beginners learn JavaScript by building a real-world project. It is a good way to start with JavaScript and learn by building projects.
## Pre-requisites ✅
- HTML
- CSS
- JavaScript
- React
- Express
- Node.js
- Git and GitHub
- Basic Command Line Knowledge
## Technologies 💻
- React (For the frontend)
- Express (For the backend)
- Node.js (As a runtime environment for JavaScript)
## Figma Design 🎨
Try to follow the design as much as possible. If you want to add your own style, you can do so.
Figma Design Link 👇
https://www.figma.com/file/uyHUXQbqmpfEUvKK8faVvo/random-quotes?type=design&mode=design&t=fF5NyQFHImw0Z6wv-1
## Contributing 💡
If you are contributing to this project, please make sure to follow the below steps:
1. Fork the repository and clone it to your local machine.
2. Create a branch for your changes.
3. After making the changes, push your code to your forked repository.
4. Create a pull request to the main repository and wait for it to get merged.
5. Celebrate 🎉
## Installation 🛠️
### Frontend Installation
1. Installation
````
cd frontend
npm install
````
2. Run
```
npm run dev
```
For More Information on Frontend 📚 check [README](./frontend/README.md)
### Backend Installation
1. Installation
```
cd backend
npm install
```
2. Run
```
npm run dev
```
For More Information on Backend 📻 check [README](./backend/README.md)
***If you like this project don't forget give a 🌟***