StoryForge

Introducing StoryForge: Your Gateway to Inspiring Narratives

Welcome to StoryForge, a captivating blog website meticulously crafted to ignite your imagination and fuel your thirst for captivating narratives. Powered by cutting-edge technologies on both the client and server sides, StoryForge seamlessly blends the power of React, Firebase, Framer Motion, LottieFiles, Tanstack Query, Node.js, Express, and MongoDB to deliver an immersive storytelling experience like no other.

Join us on StoryForge and embark on a journey of imagination, inspiration, and discovery. Whether you're here to read, write, or simply explore, we invite you to become part of our vibrant community and forge your own path through the boundless realms of storytelling. Welcome to StoryForge, where every story has the power to ignite the imagination and change the world.

Table of Contents

• Live Link
• Features
• Technologies Used
• Getting Started
• Usage
• Contributing
• License
• Contact

Features

• User Authentication: Utilizes Firebase authentication for secure user login, logout, sign up, and sign out functionalities.
• Sign in Method : User can Log in this web app by using their google / facebook / github.
• All BLogs : Here anyone can see all kind of item that has been added by any logged in user.
• Private Route : If anyone visit this website without creating account this user can't see more than two section
• Add Blog : any logged in user can see this section this is a private route . in this section user can add their blog, this content will be public.
• Feature Blog : In this section anyone can see the most longest blog in first . in this section 10 blog included based on their length
• WishList : Any logged in user can see wishlist button on the blog card , if they click on the button this blog will be wishlisted , and i wil be show on the wishlist section for the specific user

Technologies Used

• Frontend:

  • React: A JavaScript library for building user interfaces.
  • HTML5: The standard markup language for creating web pages and applications.
  • CSS3: The style sheet language used for describing the presentation of a document written in HTML.
  • JavaScript (ES6+): The programming language that enables dynamic interactivity on web pages.
  • React Router: A routing library for React applications.
  • Firebase: An authenticating kit, for manage user accessibility .
  • Framer Motion: its an animation library, i use it for make the blog cards draggable!
  • Lottie React : An Animation library for animating front end.
  • Tanstack query: Tanstack query is used for fetching data

• Backend:

  • Node js : An environments runtime for creating server side by js.
  • Express js :
  • Mongodb : Mongodb atlas for save data in the database .

Getting Started

To get started with this project, follow these steps:

1. Clone this repository to your local machine using the following command:

   git clone https://github.com/Dinobondhu-shill/StoryForge-client

   cd StoryForge-client
   npm install
   npm run dev

2. Open your browser and navigate to http://localhost:5173 to view the application.

3. Clone this repository to your local machine using for server side the following command:

   git clone https://github.com/Dinobondhu-shill/StoryForge-server

   and install the other dependencies

4. Open your browser and navigate to https://storyforge-31907.web.app to view the application.

Usage

User Authentication

1. Navigate to the login page by clicking on the "Login" button in the navigation bar.
2. Enter your email and password to log in, or click on the "Sign Up" link to create a new account.
3. After logging in, you will be redirected to the dashboard where you can explore property listings and manage your profile.

All Blog :

1. In this section user can see all blog that added by any user and they can seen the view detatils button, if any logged in user click on the button it will be redirect to the details page of this specefic page.

Add Blog

1. any logged in user can see this section this is a private route . in this section user can add their blog, this content will be public.

Feature Blog

1. In this section anyone can see the most longest blog in first . in this section 10 blog included based on their length

Wishlist

1. Any logged in user can see wishlist button on the blog card , if they click on the button this blog will be wishlisted , and i wil be show on the wishlist section for the specific user .

Contributing

Contributions are welcome! If you'd like to contribute to this project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them with descriptive messages.
4. Push your changes to your fork.
5. Submit a pull request to the main repository.

Contact

If you have any questions or suggestions, feel free to contact the project maintainer:

• Dinobondhu Shill
• Email: choncolbiswas9@gmail.com
• GitHub: https://github.com/Dinobondhu-shill

This README provides detailed information about the project, including features, technologies used, folder structure, and instructions for getting started and contributing. Feel free to customize it further to match the specifics of your project!