https://github.com/aarabii/chrome-homepage
A simple and minimal chrome landing page
https://github.com/aarabii/chrome-homepage
chrome customization mui mui-icons mui5 muiv5 react reactjs
Last synced: 4 months ago
JSON representation
A simple and minimal chrome landing page
- Host: GitHub
- URL: https://github.com/aarabii/chrome-homepage
- Owner: aarabii
- License: mit
- Created: 2023-05-09T10:09:11.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-07-14T08:14:46.000Z (almost 2 years ago)
- Last Synced: 2024-07-14T09:29:03.459Z (almost 2 years ago)
- Topics: chrome, customization, mui, mui-icons, mui5, muiv5, react, reactjs
- Language: JavaScript
- Homepage: https://chrome-homepage.vercel.app
- Size: 6.78 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
Table of Contents
## About The Project
[![CHROME-HOMEPAGE-SCREENSHOT][product-screenshot]](https://chrome-homepage.vercel.app/)
"Chrome-Homepage" is a React-based project designed to enhance the user experience of Chrome by providing users with a customizable startup page. By setting "Chrome-Homepage" as the startup page for Chrome, users can easily access their favorite websites, bookmarks, and other frequently used tools and resources.
The project is targeted towards individuals who enjoy customizing their digital experience and want to optimize their workflow by having quick and easy access to their preferred online destinations.
"Chrome-Homepage" is built using the React framework and Material UI (MUI) library, which enables developers to create responsive, visually appealing user interfaces. The project is hosted on Vercel, a cloud-based platform for building and deploying web applications.
Some of the key features of "Chrome-Homepage" include customizable widgets, such as weather, news, and search bars, as well as the ability to add and organize bookmarks. The project also includes a user-friendly interface and responsive design, ensuring that it looks and performs well on any device.
"Chrome-Homepage" is a work in progress, with ongoing development and updates planned to improve the user experience and add new features.
### Built With
- [![Next][Next.js]][Next-url]
- [![React][React.js]][React-url]
- [![MUI][MUI]][MUI-url]
## Getting Started
To set your React site as the startup page in Chrome, simply follow these steps:
1. Open Chrome and navigate to your React site (in this case, https://chrome-homepage.vercel.app/).
2. Click on the three dots in the upper-right corner of the Chrome window to open the Chrome menu.
3. Click on "Settings" from the menu.
4. Scroll down to the "On startup" section and select "Open a specific page or set of pages."
5. Click on "Add a new page" and enter the URL for your React site.
6. Click "Add" to save the changes.
### Prerequisites
This is an example of how to list things you need to use the software and how to install them.
- npm
```sh
npm install npm@latest -g
```
- React
```sh
npm install react
```
- MUI
````sh
npm install @mui/material @emotion/react @emotion/styled
```
````
- Material UI Icons
````sh
npm install @mui/icons-material
```
````
### Installation
1. Clone the repo
```sh
git clone
```
2. Install NPM packages
```sh
npm install
```
3. Start the project
```sh
npm start
```
4. Build the project
```sh
npm run build
```
5. Convert that build folder into static site
```sh
npm run export
```
6. Deploy the site
```sh
npm run deploy
```
## Usage
Setting your React site as the startup page in Chrome can greatly enhance your user experience. By doing so, every time you launch Chrome, your site will automatically load, allowing you to quickly and easily access the content and features that you need. This can save you time and effort, especially if you frequently visit your site throughout the day. Additionally, having your site set as the startup page can help you stay organized and focused, as it ensures that you always start your browsing session with the information that matters most to you. Whether you're using your React site for work or personal use, setting it as your Chrome startup page can be a convenient and helpful tool to have in your arsenal.
_For more examples, please refer to the [Documentation](https://github.com/losier/chrome-homepage#readme)_
## Roadmap
- [ ] Add Slider for so many shortcuts
- [ ] Add a setting menu so that user can add their own shortcuts or customize the site as they want
- [ ] Add Additional Templates w/ Examples
- [ ] Add Dark Mode
- [ ] Add a search bar with recent searches or recomended searches
See the [open issues](https://github.com/losier/chrome-homepage/issues) for a full list of proposed features (and known issues).
## Contributing
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_twitter](https://twitter.com/aarab_ii) - nishu@duck.com
Project Link: [https://github.com/losier/chrome-homepage](https://github.com/losier/chrome-homepage)
[contributors-shield]: https://img.shields.io/github/contributors/losier/chrome-homepage.svg?style=for-the-badge
[contributors-url]: https://github.com/losier/chrome-homepage/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/losier/chrome-homepage.svg?style=for-the-badge
[forks-url]: https://github.com/losier/chrome-homepage/network/members
[stars-shield]: https://img.shields.io/github/stars/losier/chrome-homepage.svg?style=for-the-badge
[stars-url]: https://github.com/losier/chrome-homepage/stargazers
[issues-shield]: https://img.shields.io/github/issues/losier/chrome-homepage.svg?style=for-the-badge
[issues-url]: https://github.com/losier/chrome-homepage/issues
[license-shield]: https://img.shields.io/github/license/losier/chrome-homepage.svg?style=for-the-badge
[license-url]: https://github.com/losier/chrome-homepage/blob/master/LICENSE
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/aarab-nishchal
[product-screenshot]: images/screenshot.png
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/
[MUI]: https://img.shields.io/badge/MUI-35495E?style=for-the-badge&logoColor=4FC08D
[Vue-url]: https://mui.com/
