Skip to content

Latest commit

 

History

History
70 lines (48 loc) · 2.55 KB

README.md

File metadata and controls

70 lines (48 loc) · 2.55 KB

React Express PostgreSQL One-Page Web Application

Welcome to my one-page web application project, showcasing the integration of ReactJS for the frontend, ExpressJS for the backend, and PostgreSQL for the database. This project focuses on creating a single-page web application with the following components:

  • Bootstrap Navbar for navigation
  • React Slider component for interactive content
  • Scroll-down React Card Component for engaging user experience

Technologies Used

  • Frontend: ReactJS
  • Backend: ExpressJS
  • Database: PostgreSQL
  • Styling: Bootstrap

Features

  • Bootstrap Navbar: Navigate seamlessly through the application with my intuitive Bootstrap Navbar.
  • React Slider Component: Experience dynamic content presentation with my interactive React Slider.
  • Scroll-down React Card Component: Engage with captivating content using my scroll-down React Card Component.
  • Sticky Banner: Advertising banners are shown when scrolling down at intervals of 5 cards.When it reaches the navbar, the top should remain top sticky.
  • After 5th cards show text "Loading..." between the cards. Also introduced the infinity loading effect.

Problem Solving

  • Scroll bottom to top butten : It can make user friendly structure

Getting Started

To get started with this project, follow these steps:

  1. Clone this repository to your local machine.
  2. Navigate to the project directory.
  3. Install dependencies for both frontend and backend using npm install.
  4. Configure your PostgreSQL database connection.
  5. Start the backend server using npm start in the backend directory.
  6. Start the frontend server using npm start in the frontend directory.
  7. Open your browser and navigate to http://localhost:3000 to view the application.

Folder Structure

  • frontend: Contains the ReactJS frontend code.
  • backend: Contains the ExpressJS backend code.
  • database: Contains PostgreSQL database schema and scripts.

Contributing

Contributions are welcome! If you'd like to contribute to this project, feel free to open a pull request.

Screen Shots

screen-capture.webm

Contact

If you have any questions or suggestions regarding this project, feel free to contact me at minhajt.uae@gmail.com or minhajt.com. Thank you for checking out my project! I hope you enjoy using it.