Fancy Slideshow Maker

Fancy Slideshow Maker is your go-to tool for crafting captivating presentations that leave a lasting impression. With an innovative map-inspired slider, this React web app redefines the way you create and share your ideas.

User Features

These are the features that end-users can interact with and experience:

• Drag-and-Drop Interface: Effortlessly create and organize slides by dragging and dropping elements like text, images, and shapes.
• Map-Inspired Slider: Navigate through your slides with an intuitive map-inspired slider, enhancing the visual experience of presentations.
• Customizable Elements: Modify the appearance of slides with customizable fonts, colors, and layout options.
• Responsive Design: View and create presentations on any device, thanks to a fully responsive design.
• Easy Slide Management: Add, delete, and rearrange slides with simple controls.

Technical Features

These are the underlying technologies and code-related features that power the Fancy Slideshow Maker:

• React & TypeScript: Built using React with TypeScript for a type-safe, scalable, and maintainable codebase.
• Redux Thunk for State Management: Uses Redux Thunk to handle complex state management and asynchronous operations like fetching data or saving slides.
• Component-Based Architecture: Designed with reusable components to ensure code modularity and reusability.
• Immer for Immutability: Leverages Immer within Redux to simplify immutable state updates, making code more readable and maintainable.
• Custom Drag-and-Drop Implementation: Utilizes the react-dnd library for the drag-and-drop interface, ensuring a smooth and intuitive user experience.
• Responsive Layout with CSS Grid & Flexbox: Ensures that the layout adapts seamlessly to different screen sizes using CSS Grid and Flexbox.
• Webpack for Module Bundling: Configured with Webpack for optimized bundling, ensuring fast load times and efficient asset management.
• ESLint & Prettier: Integrated ESLint and Prettier for consistent code style and to catch errors early in the development process.
• Unit and Integration Testing: Ensures reliability and robustness with a comprehensive suite of tests using Jest and React Testing Library.

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the Repository

   git clone https://github.com/Shuaa-Technology/fancy-slideshow-maker.git
   cd fancy-slideshow-maker

2. Install Dependencies

   npm install
   # or
   yarn install

3. Start the Development Server

   npm start
   # or
   yarn start

   This will run the app in development mode. Open http://localhost:3000 to view it in your browser.

Building for Production

To create a production build of the app, run:

npm run build
# or
yarn build

The build artifacts will be stored in the build/ directory.

Contributing

We welcome contributions! To contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature-name).
3. Make your changes.
4. Commit your changes (git commit -m 'Add some feature').
5. Push to the branch (git push origin feature/your-feature-name).
6. Open a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

For any inquiries, please reach out at chehata.b8@gmail.com. alaeddinbs@gmail.com