📚 Storytime

📖 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.

🚀 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

🕒 Project Duration

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

🌐 Live Demo

• Website: Storytime Live

🎨 Design

The application’s design was created using Figma, enabling an intuitive and attractive interface for users.

🧪 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:

• LinkedIn: Diogo Silva
• GitHub: SRamoras

---