Code Monkey home page Code Monkey logo

poll_app's Introduction

๐Ÿ“Šโœจ Poll App - Polling Application โœจ๐Ÿ“Š

Poll App is a powerful polling application that enables users to cast their vote, and visualize data effortlessly.

๐Ÿš€ Features

  • Interactive Polls: Cast your opinions by participating in. Your voice matters!
  • Real-time Visualization: Experience dynamic insights at your fingertips! Visualize poll results instantly with interactive charts powered by Recharts, enabling you to grasp trends and patterns effortlessly.
  • Intuitive User Interface: Enjoy a seamless and delightful user experience with our thoughtfully crafted Material-UI components. Navigate the app effortlessly and engage in polls with ease.
  • Efficient API Testing: Streamline your development process with ThunderClient, a powerful tool that allows you to efficiently test APIs. Ensure your backend functions smoothly and handle requests seamlessly.
  • Global Accessibility: Deploy your frontend with confidence using Vercel, a reliable platform that ensures your application is accessible to users worldwide. Reach a broader audience and make your polls accessible to everyone, everywhere.

๐Ÿ› ๏ธ Technologies Used

  • Frontend: ReactJS, Material-UI
  • Backend: Node.js, Express, PostgreSQL
  • Data Visualization: Recharts
  • API Testing: ThunderClient
  • Deployment: Vercel

The project is organized into two main folders:

๐Ÿ“ Client Folder Structure

The client folder contains all the client-side code for the React application. Here's the updated structure of the client folder:

client
โ”‚
โ”œโ”€โ”€ public                  # Contains public assets (HTML, images, etc.) served by the React app
โ”œโ”€โ”€ src                     # Main source code for the React application
โ”‚   โ”œโ”€โ”€ Assets              # Contains all the assets
|   |   โ”œโ”€โ”€ Icons           # Icons
|   |   โ”œโ”€โ”€ Images          # Images
|   |   โ””โ”€โ”€  Stylesheets     # Stylesheets
โ”‚   โ”œโ”€โ”€ Components          # Reusable React components
โ”‚   โ”‚   โ”œโ”€โ”€ Component1      # Specific component folder
โ”‚   โ”‚   โ”œโ”€โ”€ Component2      # Another component folder
โ”‚   โ”‚   โ”œโ”€โ”€ index.js        # index file
โ”‚   โ”‚   โ””โ”€โ”€ ...             # Other component folders
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ Constants           # Links, data, and other constants
โ”‚   โ”œโ”€โ”€ Pages               # Individual page components
โ”‚   โ”‚   โ”œโ”€โ”€ index.js        # index file
โ”‚   โ”‚   โ”œโ”€โ”€ Page1           # Specific page folder
โ”‚   โ”‚   โ”œโ”€โ”€ Page2           # Another page folder
โ”‚   โ”‚   โ””โ”€โ”€ ...             # Other page folders
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ Themes              # Material-UI theme configuration
โ”‚   โ”‚   โ””โ”€โ”€  index.js        # index file
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ App.js              # Main component where routes and app structure are defined
โ”‚   โ”œโ”€โ”€ index.js            # Entry point of the React app
โ”‚   โ”‚
โ”‚   โ”œโ”€โ”€ components/index.js # Combined index file for all components
โ”‚   โ”œโ”€โ”€ constants/index.js  # Combined index file for all constants
โ”‚   โ””โ”€โ”€ pages/index.js      # Combined index file for all pages
โ””โ”€โ”€ ...

๐Ÿ“ Server

The server folder contains all the server-side code for the Node.js, Express, and PostgreSQL application. Here's the structure of the server folder:

server
โ”‚
โ”œโ”€โ”€ database.sql     # db structure
โ”œโ”€โ”€ db.js            # db configs
โ”œโ”€โ”€ index.js         # Entry point of the server application
โ””โ”€โ”€ ...              # Other files

๐ŸŒ Getting Started

  1. Clone the Repository:

    git clone [your forked repo url]
    

    Replace [your forked repo url] with the actual URL of your Git repository.

  2. Client Setup:

    • Navigate to the client folder and install dependencies using npm install.
    • Run the client-side application using npm start.
    • More documentaion in Client README.md
  3. Server Setup:

    • Navigate to the server folder and install dependencies using npm install.
    • Set up your PostgreSQL database and configure the connection in the server.
    • Run the server-side application using npm start.
    • More documentaion in Server README.md
  4. Start Polling: Open the client app, create polls, vote, and explore insightful visualizations!


poll_app's People

Contributors

preethamnaik12 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.