Skip to content

Storytime is an interactive web platform that allows users to create, share, and explore stories collaboratively. With a user-friendly interface and robust features, Storytime is the perfect place for aspiring writers and story enthusiasts to share their creations with a vibrant community.

License

Notifications You must be signed in to change notification settings

SRamoras/storytime

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

55 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“š Storytime

Storytime Banner

πŸ“– About Storytime

Storytime is an interactive web platform that allows users to create, share, and explore stories collaboratively. With a user-friendly interface and robust features, Storytime is the perfect place for aspiring writers and story enthusiasts to share their creations with a vibrant community (this was my first full-stack project ever made).

πŸš€ Features

  • πŸ“ Story Creation: Easily write and format your own stories.
  • πŸ”„ Sharing: Publish your stories for others to read, comment, and interact with.
  • πŸ” Exploration: Browse through a vast collection of community-created stories.
  • πŸ”’ User Authentication: Register and log in to manage your stories and interactions securely.
  • πŸ‘€ User Profiles: Customize your profile and track your activities on the platform.
  • ⭐ Favorites: Save your favorite stories for quick and easy access.

πŸ› οΈ Technologies Used

Next.js React Node.js JWT PostgreSQL Supabase Figma Git GitHub Render GitHub Pages

πŸ•’ Project Duration

The Storytime project was developed over a period of 2 weeks, from design conception to implementation and final testing.

🌐 Live Demo

πŸ§ͺ Testing

Automated tests ensure the reliability and stability of the platform. Learn more about the testing process.

πŸ“¦ Installation (Optional)

For those interested in exploring or contributing to the codebase.

πŸ› οΈ Prerequisites

  • Node.js and npm installed on your machine.
  • PostgreSQL installed locally or a Supabase account for a hosted database.

πŸ”§ Step-by-Step

  1. Clone the Repository

    git clone https://github.com/SRamoras/storytime.git
  2. Navigate to the Project Directory

    cd storytime
  3. Setup the Backend

    cd backend
    • Install Dependencies

      npm install
    • Configure Environment Variables

      Create a .env file in the backend directory and add the following:

      PORT=5000
      DATABASE_URL=your_supabase_postgresql_url
      JWT_SECRET=your_secret_key
    • Run Database Migrations (if applicable)

      npx sequelize db:migrate
      npx sequelize db:seed:all
    • Start the Backend Server

      npm start
  4. Setup the Frontend

    Open a new terminal window and navigate to the frontend directory:

    cd frontend
    • Install Dependencies

      npm install
    • Configure Environment Variables

      Create a .env.local file in the frontend directory and add the following:

      REACT_APP_API_URL=https://storytime-backend-f240.onrender.com/api
      PUBLIC_URL=https://sramoras.github.io/storytime/
      REACT_APP_BASE_IMAGE_URL=https://storytime-backend-f240.onrender.com/uploads/
    • Start the Frontend Server

      npm run
  5. Access the Application

    Open your browser and go to http://localhost:3000 to see Storytime in action!

πŸ”’ Authentication

Storytime uses JWT (JSON Web Tokens) for secure user authentication. Below is an overview of the authentication process:

// backend/authenticateToken.js

const jwt = require('jsonwebtoken');

const authenticateToken = (req, res, next) => {
    const authHeader = req.header('Authorization');
    console.log('Authorization Header:', authHeader);

    if (!authHeader) {
        return res.status(401).json({ error: 'Access denied. Token not provided.' });
    }

    const token = authHeader.split(' ')[1];
    console.log('Token:', token);

    try {
        const decoded = jwt.verify(token, process.env.JWT_SECRET);
        console.log('Token Decoded:', decoded);
        req.user = decoded;
        next();
    } catch (error) {
        console.error('Error verifying token:', error);
        res.status(403).json({ error: 'Invalid token.' });
    }
};

module.exports = authenticateToken; 5. Access the Application

Open your browser and go to [http://localhost:3000](http://localhost:3000) to see Storytime in action!

πŸ“„ License

This project is licensed under the MIT License.

πŸ“« Contact

For more information, feel free to reach out:


About

Storytime is an interactive web platform that allows users to create, share, and explore stories collaboratively. With a user-friendly interface and robust features, Storytime is the perfect place for aspiring writers and story enthusiasts to share their creations with a vibrant community.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published