Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joefelx/fontverse
Font Verse is a font-serving web application allowing users to browse, select, and use various fonts for their creative projects
https://github.com/joefelx/fontverse
express font react
Last synced: about 5 hours ago
JSON representation
Font Verse is a font-serving web application allowing users to browse, select, and use various fonts for their creative projects
- Host: GitHub
- URL: https://github.com/joefelx/fontverse
- Owner: joefelx
- Created: 2024-01-26T04:05:16.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-03-16T13:32:43.000Z (8 months ago)
- Last Synced: 2024-03-17T14:50:27.033Z (8 months ago)
- Topics: express, font, react
- Language: JavaScript
- Homepage: https://fontverse.vercel.app
- Size: 40.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Font Verse
Font Verse is a font-serving web application allowing users to browse, select, and use various fonts for their creative projects
## 📝 Table of Contents
- [About](#about)
- [Feature](#feature)
- [Architecture](#architecture)
- [Deployment](#deployment)
- [Usage](#usage)
- [Built Using](#built_using)
- [Author](#author)
- [Acknowledgments](#acknowledgement)
## 🧐 About
Font Verse is a font-serving web application allowing users to browse, select, and use various fonts for their creative projects. The application offers a user-friendly interface where users can search for fonts based on style, category, or popularity. Font Verse also allows previewing the fonts in different text sizes and styles before using them. Users can include their favorite fonts in the application and use them in their projects.
## 🏁 Features
1. **Font Search and Browse**: Users can search for fonts by keyword, style, category, or popularity. They can also browse through curated collections of fonts.
2. **Font Preview**: Users can preview fonts in different text sizes and styles before downloading them.
3. **Community Interaction**: Users can leave reviews and comments on fonts, as well as follow their favorite designers, and discover new fonts through recommendations.
4. **API Integration**: Font Verse integrates with import tooling, allowing users to seamlessly import fonts into their projects.
## 🏗️ Architecture
### Client-Side
- The front end is built using React, a popular JavaScript library for building user interfaces. React components handle user interactions.
- Tailwind is used to design the front end of the application.
- State management is done using useContext, and useReducer.
- Implemented a custom hook called `useFont` for API requests and state management.
### Server-Side
- The back end is built using Node.js and Express, a minimal and flexible Node.js web application framework.
- Data is stored in a MongoDB database.
- The server communicates with the client via a RESTful API.
### Endpoints
#### Get the specified font family.
***Request***
```
GET /api/font/style?fontFamily=Mattone
```
| Name | Required | Type | Description |
| --------------:|:--------:|:-------:| ----------------------------------------------------------------------------------------------------- |
| `fontFamily` | required | string | Specify the font family that will be used to find the metadata of the font in the database. |
***Response***
```css
@font-face {
font-family: 'Mattone';
src: url('https://font-verse-api.onrender.com/fonts/1707023098991-Mattone-150.woff2') format('woff2');
font-weight: 500;
}
```
#### Get multiple font families.
***Request***
```
GET /api/font/style?fontFamily=Mattone,Montserrat
```
| Name | Required | Type | Description |
| --------------:|:--------:|:-------:| -------------------------------------------------------------------------------------------------------|
| `fontFamily` | required | string | Specify the font families with comma-separated font families that will be used to find the metadata of the fonts in the database. |
***Response***
```css
@font-face {
font-family: 'Mattone';
src: url('https://font-verse-api.onrender.com/fonts/1707023098991-Mattone-150.woff2') format('woff2');
font-weight: 500;
}
@font-face {
font-family: 'Montserrat';
src: url('https://font-verse-api.onrender.com/fonts/1707024729190-Montserrat-Medium.woff2') format('woff2');
font-weight: 500;
}
```
## 🚀 Deployment
### Client
Deployed on the Vercel.
[fontverse.vercel.app](http://fontverse.vercel.app)
### Server
Deployed on [Render.com](render.com)
In the free tier, the server automatically paused. It takes 50 or more sec to spin up the server, which will be upgraded in the future.
## 🎈 Usage
### Selecting Fonts
The fonts are available on the [fontverse.vercel.app](http://fontverse.vercel.app) website. Users can select the fonts. After selecting the fonts, it will be added to the list.
### Copy the Link tag
Link tag will be generated for the selected font family dynamically. Copy and paste it into the HTML file or import into CSS file.
HTML
```html
```
CSS
```css
@import url("https://font-verse-api.onrender.com/api/font/style?fontFamily=Mattone");
```
### Font Family Usage
The font family names can be specified in CSS file.
```css
font-family: Mattone;
```
## ⛏️ Built Using
- React - Client Framework
- MongoDB - Database
- Express - Server Framework
- NodeJs - Server Environment
## ✍️ Author
[@joefelx](https://github.com/joefelx) - Designed and Developed.
## 🎉 Acknowledgements
***Inspiration***
- [Google fonts](https://fonts.google.com/)
- [Fontspace](https://www.fontspace.com/)