https://github.com/mewmewdevart/projectspage
Just an experiment using "excel" as a database for hosting my projects.
https://github.com/mewmewdevart/projectspage
css database html javascript template
Last synced: 3 months ago
JSON representation
Just an experiment using "excel" as a database for hosting my projects.
- Host: GitHub
- URL: https://github.com/mewmewdevart/projectspage
- Owner: mewmewdevart
- License: mit
- Created: 2023-05-04T22:26:42.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-08T13:23:59.000Z (about 3 years ago)
- Last Synced: 2025-07-10T16:30:57.683Z (12 months ago)
- Topics: css, database, html, javascript, template
- Language: HTML
- Homepage: https://mewmewdevart.github.io/projectsPage/
- Size: 563 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
projectsPage
Just an experiment using "excel" as a database for hosting my projects.
## 💡 About the project
This project is an experimental website that uses Google Spreadsheet as a database to host information about various projects. The website displays project cards that contain information about each project, including the project's category, title, description, photo, and URL.
⚠️ | This project was created for study purposes and as to be a fun project, and I dont recommend using an "excel" to store your data. Instead, try using a database like MySQL or others. The performance, scalability, and security will be much better!
🔗 Click here to acess the page of project
## 📁 Structure/
* ```index.html``` Responsible for controlling the basic structure of the project.
* ```sources/``` Folder where the card images, CSS and JavaScript files of the project are located
* ```LICENSE``` License for use and distribution of the project.
## 🛠️ Usage
### Prerequisites
To access the website, all you need is an internet connection and a web browser (preferably Google Chrome browser). To make changes and interact with the code, it is necessary to have basic knowledge of JavaScript (with API) , HTML, and CSS, and the corresponding extensions installed on your local machine.
❗️| Make sure you have all the required tools and knowledge installed on your local machine, then continue with these steps."
### Instructions for running and creating your own Projects Page:
**0. Download the archives**
```bash
# Clone the repository
$ git clone git@github.com:mewmewdevart/projectsPage.git
# Enter into the directory
$ cd projectsPage
```
**1. Do the changes in the sources/main.js code**
- Replace the ```id_spreadsheet``` variable with the ID of the user's Google Sheets.
- Ensure that the data in the user's Google Sheets is structured in the same way as the example code (with columns for category, title, description, photo, and url).
- Example : Use my Google spreadsheets as a reference : 🔗 Click here to see my Google Sheet
- Update the ```new_table.push()``` function to extract the data from the appropriate columns in the user's Google Sheets.
#### 📄 Note
This project use the jQuery AJAX API to make a GET request to a Google Spreadsheet and retrieve data in JSON format. It then parses the JSON data to create a table using the Sheetsee.js library. The code also includes functionality to filter the table by category and display pagination buttons. It uses the Jquery library to handle DOM manipulation and event handling. Understand the basics of how the code works to make modifications more easily.
## 🦾 Technologies
- HTML, CSS, and JavaScript, and utilizes the jQuery and Sheetsee.js libraries.
- [VS CODE](https://www.eclipse.org/downloads/) | I'm a fan of Vim, but due to the web project, I decided to use VS Code.
- Aseprite to edit the banner images of the project.
- A classic notebook to take some notes about the project.
## 🔗 References
- [Markdown](https://www.markdownguide.org/basic-syntax/) | Documentation on how to use Markdown.
- Internet forums and blogs to address my doubts related to the language (Alura, Stack Overflow, and Geeks for Geeks).
- Google Translate to translate some parts of content that were in another language.
## 📋 Issues
Feel free to open an issue if you find a bug or have a suggestion, so we can discuss the best way to improve or fix it.
## 👋 Contributing
You're always welcome to contribute to this project, just create your pull request, and wait for the review.
## 📜 License
This project is made under the MIT license, for more information about its possible use, modification, and sharing, [click here](LICENSE).
Developed with love 💜 by Larissa Cristina Benedito (Mewmew/Larcrist).