Skip to content

Latest commit

 

History

History
79 lines (51 loc) · 3.13 KB

README.md

File metadata and controls

79 lines (51 loc) · 3.13 KB
Raw

Focus Lamp Web-App 🌟

Welcome to Focus Lamp web-app! A community-space where one can manage their goals using an engaging lamp theme, share their story, connect with community members. With seamless Google sign-in and real-time goal management.

Features 🚀

  • Google Authentication: Sign in and manage your goals securely with Google.
  • Real-time Goal Management: Add, view, and remove goals with instant updates.
  • Dynamic Lamps: Each goal is represented by a lamp that updates based on your goals.
  • Profile Management: View and update your profile photo and name.
  • Story Management: Add or View member stories with a wordcloud based on content of story.
  • Responsive Design: Optimized for both desktop and mobile devices.

Technologies Used 🔧

  • Frontend: HTML, CSS, JavaScript, Bootstrap
  • Backend: Firebase (Authentication, Firestore)

Getting Started 💻

Follow these steps to run the App locally:

  1. Clone the Repository 📲

    git clone https://github.com/Monika5S/HackBrew-24.git
cd HackBrew-24

  2. Install Dependencies ⚙️

    • This project uses Firebase via CDN, so no additional dependencies are required.

  3. Configure Firebase 🔥

    • Go to the Firebase Console.
    • Create a new project and enable Authentication and Firestore.
    • Replace the Firebase configuration in source/firebase/firebaseConfig.js with your project's credentials.

  4. Run the App 🌞

    • Open index.html in your browser to view the application locally.
    • Optionally, deploy the app to Netlify for hosting.

  5. File Structure 📁

    • index.html: The main page where you interact with goals and sign in.
    • profile.html: Page for viewing user profile information.
    • reflect.html: Page for viewing and adding stories to share with everyone.
    • styles/style.css: CSS file for styling the application.
    • source/firebase/firebaseConfig.js: Firebase configuration and initialization.
    • source/firebase/auth.js: Handles user authentication logic.
    • source/goals.js: Manages goal-related functions and UI updates.
    • source/profile.js: Handles display of profile related info.
    • source/reflect.js: Manages Stories updates and wordcloud generation.

  6. Key Features Implementation 🔑

    Authentication

    • auth.js: Handles sign-in, sign-out, and UI updates based on authentication state.
    • firebaseConfig.js: Initializes Firebase and exports necessary functions.

    Goals Management

    • goals.js: Manages goal operations, including adding, displaying, and removing goals. Lamps update dynamically based on the goals.

    Profile Page

    • profile.js: Displays and updates user profile information such as photo and name.

    Reflect Page

    • reflect.js: Manages stories operation, including adding, displaying stories and word cloud generation based on content of each story.

  7. Contributing 🤝

  • Contributions are welcome! Feel free to open issues or submit pull requests to improve the app.
image