Skip to content

Latest commit

 

History

History
98 lines (66 loc) · 3.59 KB

README.md

File metadata and controls

98 lines (66 loc) · 3.59 KB

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