📖 SoulScript

A sanctuary for words that move, heal, and inspire.

SoulScript is a modern, elegant web application built with React that allows users to discover, share, and collect inspiring quotes. Whether you're seeking daily motivation, wisdom, or simply beautiful words that resonate with your soul, SoulScript provides a curated experience for quote enthusiasts.

✨ Features

🎯 Core Functionality

Quote Discovery: Browse a curated collection of inspiring quotes from various sources
Quote of the Day: Get a fresh, inspiring quote every day to start your day right
Random Quote Generator: Generate random inspirational quotes on demand
Smart Filtering: Filter quotes by categories and tags (inspirational, success, wisdom, life, happiness)
Search Functionality: Search through quotes to find exactly what you're looking for
Personal Collection: Save and manage your favorite quotes in your personal collection

🔐 User Authentication

Email/Password Authentication: Traditional sign-up and login system
Google Sign-In: Quick authentication using Google OAuth
Protected Routes: Secure user-specific features and data
Session Management: Persistent authentication state across sessions
Account Management: User profile and account settings

💫 User Experience

Modern UI/UX: Clean, minimalist interface with elegant design
Smooth Animations: Framer Motion powered animations for delightful interactions
Responsive Design: Fully responsive layout that works on all devices
Beautiful Gradients: Eye-catching rose and orange gradient themes
Interactive Cards: Beautifully designed quote cards with hover effects
Loading States: Smooth loading animations and states

📝 User-Generated Content

Create Quotes: Share your own thoughts and wisdom with the community
Author Attribution: Properly credit quote authors
Personal Storage: Your quotes are saved to your personal collection
Local Persistence: Quotes are stored in localStorage for quick access

🛠️ Technology Stack

Frontend Framework

React 19.0.0: Latest React version with modern features
React Router DOM 7.5.2: Client-side routing and navigation
Vite 6.3.1: Next-generation frontend tooling for fast development

Styling

TailwindCSS 4.1.4: Utility-first CSS framework
Framer Motion 12.10.0: Production-ready animation library
Custom Gradients: Rose and orange themed color palette

Authentication & Backend

Firebase 11.6.1: Authentication and backend services
- Firebase Authentication (Email/Password & Google OAuth)
- Firebase Analytics
- Firebase Security Rules
React Firebase Hooks 5.1.1: React hooks for Firebase

UI Components & Icons

React Icons 5.5.0: Popular icon library
React Google Button 0.8.0: Pre-styled Google sign-in button

External APIs

ZenQuotes API: Quote data source via AllOrigins proxy
REST API Integration: Fetching quotes from external sources

Development Tools

ESLint 9.22.0: Code linting and quality
Vite Plugins: React plugin for fast refresh

📁 Project Structure

SoulScript-main/
├── public/                    # Static assets
├── src/
│   ├── api/
│   │   └── fetchQuotes.js    # API integration for fetching quotes
│   ├── assets/               # Images and static resources
│   ├── Components/
│   │   ├── Account.jsx       # User account management
│   │   ├── FilterTags.jsx    # Quote category filters
│   │   ├── MyQuotes.jsx      # Personal quote collection
│   │   ├── Navbar.jsx        # Navigation bar
│   │   ├── ProtectedRoute.jsx # Route authentication wrapper
│   │   ├── QuoteCard.jsx     # Individual quote display card
│   │   ├── QuoteOfTheDay.jsx # Daily featured quote
│   │   ├── RandomQuoteGenerator.jsx # Random quote generator
│   │   ├── SearchBar.jsx     # Quote search functionality
│   │   ├── SignIn.jsx        # Login component
│   │   └── Signup.jsx        # Registration component
│   ├── Conf/
│   │   └── conf.js           # Firebase configuration
│   ├── Context/
│   │   └── AuthContext.jsx   # Authentication state management
│   ├── Pages/
│   │   ├── About.jsx         # About page
│   │   ├── Home.jsx          # Landing page
│   │   └── Quotes.jsx        # Quote browsing page
│   ├── Utils/
│   │   └── Firebase.js       # Firebase initialization
│   ├── App.jsx               # Main app component with routing
│   ├── App.css               # App-specific styles
│   ├── index.css             # Global styles
│   └── main.jsx              # Application entry point
├── eslint.config.js          # ESLint configuration
├── index.html                # HTML template
├── package.json              # Project dependencies
├── vite.config.js            # Vite configuration
└── README.md                 # Project documentation

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher)
npm or yarn package manager
Firebase account for authentication setup

Installation

Clone the repository

git clone https://github.com/yourusername/SoulScript.git
cd SoulScript-main

Install dependencies
```
npm install
```

Configure Firebase

Create a src/Conf/conf.js file with your Firebase credentials:

const conf = {
  FIREBASE_API_KEY: "your-api-key",
  FIREBASE_AUTH_DOMAIN: "your-auth-domain",
  FIREBASE_PROJECT_ID: "your-project-id",
  FIREBASE_STORAGE_BUCKET: "your-storage-bucket",
  FIREBASE_MESSAGING_SENDER_ID: "your-sender-id",
  FIREBASE_APP_ID: "your-app-id",
  FIREBASE_MEASUREMENT_ID: "your-measurement-id"
};

export default conf;

Start the development server
```
npm run dev
```
Open your browser

Navigate to http://localhost:5173 to see the app running.

Build for Production

npm run build

This creates an optimized production build in the dist folder.

Preview Production Build

npm run preview

🎨 Key Features Deep Dive

1. Home Page

Hero section with welcoming message
Quote of the Day feature
Random Quote Generator
Quick access to personal collection (for authenticated users)
Featured quotes gallery

2. Quotes Page

Comprehensive quote browsing
Tag-based filtering system
Refresh button to load new quotes
Beautiful card-based layout
Smooth animations and transitions

3. My Quotes (Protected)

Create and share your own quotes
View your personal collection
Edit and manage your quotes
Local storage persistence
User-specific data isolation

4. Authentication System

Secure email/password registration
Google OAuth integration
Protected routes for authenticated features
Persistent session management
User profile integration

5. About Page

Mission and vision statement
Feature highlights
Design philosophy
Community information

🔧 Configuration

Environment Setup

The app uses Firebase for authentication. You'll need to:

Create a Firebase project at Firebase Console
Enable Authentication methods (Email/Password and Google)
Add your web app to Firebase project
Copy the configuration to src/Conf/conf.js

Vite Configuration

The project includes custom Vite configuration for:

React Fast Refresh
TailwindCSS integration
Firebase authentication proxy
Production optimizations

📱 Responsive Design

SoulScript is fully responsive and optimized for:

📱 Mobile devices (320px and up)
📱 Tablets (768px and up)
💻 Desktops (1024px and up)
🖥️ Large screens (1280px and up)

🎯 API Integration

ZenQuotes API

Endpoint: https://zenquotes.io/api/quotes
Proxy: AllOrigins for CORS handling
Features: Fetches curated quotes with authors and tags
Fallback: Built-in fallback quotes for offline support

🔐 Authentication Flow

User visits the app
Can browse public quotes without authentication
Sign up or log in to access personal features
Google OAuth or email/password authentication
Protected routes redirect unauthenticated users
Session persists across page reloads
Logout clears authentication state

💾 Data Storage

Local Storage

User quotes stored per user ID
Format: quotes_${userId}
Includes: quote text, author, timestamp, user info

Firebase

User authentication data
Session management
Google OAuth tokens

🎨 Design Philosophy

SoulScript embraces:

Minimalism: Clean, uncluttered interface
Elegance: Sophisticated color palette and typography
User-Centric: Intuitive navigation and interactions
Accessibility: Readable fonts and proper contrast
Performance: Optimized loading and smooth animations

🚧 Future Enhancements

Potential features for future versions:

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Created with ❤️ by an engineering student passionate about clean design, elegant words, and meaningful user experiences.

🙏 Acknowledgments

ZenQuotes API for providing quality quote content
Firebase for authentication infrastructure
Framer Motion for beautiful animations
TailwindCSS for rapid UI development
React Community for excellent tools and libraries

📞 Support

If you have any questions or run into issues:

Open an issue on GitHub
Check existing documentation
Review Firebase setup guides

🌟 Show Your Support

If you like this project, please give it a ⭐ on GitHub!

Made with 💖 using React, Vite, TailwindCSS, and Firebase

Name		Name	Last commit message	Last commit date
Latest commit History 9 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation