Skip to content

πŸ“Έ A Social-Media Platform built with Node.js & Express.js | Features: photo uploads, captions, post editing & deletion | EJS templating & Vanilla CSS | RESTful APIs & CRUD operations | Perfect for Backend Dev Learning | Initially, No DB, uses Array for Data Storage, but More Features Coming πŸš€

License

Notifications You must be signed in to change notification settings

VinayNoogler000/VINSTAGRAM

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

67 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Vinstagram - Social Media Platform for Gen-Alpha

License: MIT GitHub issues GitHub stars HTML5 CSS JavaScript EJS Node.js Express.js UUID Multer Method-Override Nodemon Dotenv

πŸ“– Overview

Vinstagram is a social media platform, where users can create, view, edit and delete their posts, where each post consists of an image and a caption. This project is built completely by the intent of learning and strengthening my web development skills, especially Backend development, and later scaling it to a Full-Stack Web App by integrating DB and more features to it. It demonstrates the fundamental concepts of building a web application by using these backend web technologies.

πŸŽ₯ Demo

Instagram-Clone-Basic

πŸ›  Technologies Used

  • Node.js: A JavaScript runtime for building server-side applications.
  • Express.js: A web application framework for Node.js, used to build the server and handle routing.
  • HTML5: Provides the structure and content of the web page.
  • EJS (Embedded JavaScript): A templating engine used to generate HTML markup with plain JavaScript.
  • Vanilla CSS: For styling the HTML content.
  • UUID: A library to generate unique identifiers for each post.
  • Vanilla CSS: For styling the HTML content.
  • Multer: A middleware for handling multipart/form-data, used for uploading files.
  • Method-Override: A library to use HTTP verbs such as PUT or DELETE in places where the client doesn't support it.
  • Bunny.net: Storage Zone and CDN were used to store uploaded images and serve them to the client, with robustness.

πŸ“š Learnings

  1. Node.js: Gained an understanding of how to use Node.js to build server-side applications.
  2. Express.js: Learned how to use Express.js to create a web server and handle routing.
  3. EJS: Learned how to use EJS as a templating engine to generate dynamic HTML content.
  4. REST Principles: Acquired knowledge of REST principles for creating RESTful APIs.
  5. CRUD Operations: Understood the concepts of Create, Read, Update, and Delete (CRUD) operations.
  6. CRUD on Resources: Learned to perform CRUD operations on resources (data stored in the database) using HTTP verbs and RESTful APIs.
  7. Redirection: Learned to redirect client requests using res.redirect() in route handlers.
  8. Method Override: Learned to override HTTP GET and POST methods with PUT, PATCH, and DELETE methods using the method-override library.
  9. Route/Path vs API: Understood the difference between a route/path and an API. A route/path is an endpoint to handle requests, while an API is a set of rules for communication between client and server.
  10. Multer Library: Learned how to use the multer library for handling file uploads, including specifying the destination and name of the uploaded files, defining the total number of files the client can send with requests or form-data, parsing the image files uploaded as form-data, and handling multiple file uploads of the same field.
  11. Dotenv: Learned how to use the dotenv library to manage environment variables, allowing for better configuration and security of sensitive information.
  12. File System: Got to know about fs built-in Node.js library which allows us to interact with file system on the server, and use it's fs.unlink() method to delete/remove files from any specific directory/folder, by passing its correct path. It allows us to read, write, update, delete and manage files and directories.
  13. Bunny.net API: Learnt about how to upload new files/images to the Storage Zone and get the image via it's CDN, with robust speed.

πŸ“‹ Prerequisites

Before you begin, ensure you have met the following requirements:

  • You have installed the latest version of Node.js.
  • You have installed the latest version of Nodemon, for automatically restarting the server on file changes.
  • You have a basic understanding of Frontend (JavaScript, HTML, and CSS) and Backend (Node.js, Express.js, EJS, RESTful APIs) technologies.
  • You have a code editor like VS Code.

βš™οΈ Setup

  1. Clone the repository:

    git clone https://github.com/VinayNoogler000/Instagram-Clone.git
  2. Navigate to project directory:

    cd Instagram-Clone
  3. Install dependencies:

    npm install
  4. Start the server:

    npm start # only if 'nodemon' library is installed in your system, else
    node index.js
  5. Open your browser and navigate to http://localhost:8080/posts.

πŸ“ Project Structure

project-root/
β”œβ”€β”€ index.js            # Main entry point of the application.
β”œβ”€β”€ views               # Contains EJS templates.
    β”œβ”€β”€ index.ejs       # Homepage of the website.
    β”œβ”€β”€ new.ejs         # Form to create a new post.
    β”œβ”€β”€ show.ejs        # Displays a specific post.
    β”œβ”€β”€ edit.ejs        # Form to edit an existing post.
β”œβ”€β”€ public              # Contains static files such as CSS and images.
    |── icons           # Directory for storing icons in SVG format.
    β”œβ”€β”€ style.css       # Basic styling for the whole website (all webpages).
β”œβ”€β”€ init                # Stores auxillary data/files to avoid redundancy, and for increasing maintainability.
    β”œβ”€β”€ posts.js        # Stores the Posts array and sample posts data.
β”œβ”€β”€ package.json        # Lists the project dependencies and scripts.
β”œβ”€β”€ package-lock.json   # Contains the exact versions of dependencies installed.
β”œβ”€β”€ .gitignore          # Contains all the files and folders to be ignored (not tracked) by Git.
β”œβ”€β”€ README.md           # Project documentation.
└── LICENSE             # Contains the licensing information for the project

πŸ’¬ Seeking Feedback & Improvements

I would love to hear your feedback on this project! If you have suggestions for performance improvements or ideas for new features, please feel free to open an issue on the GitHub repository.

πŸ› Found a Bug? Have a Feature Suggestion?

If you find a bug or have a feature suggestion, please open an issue here with a clear description and steps to reproduce. Your input means a lot to me, as it helps me grow and become a more powerful software developer engineer.

🀝 Contributing

To contribute to this project, follow these steps:

  1. Fork the repository.
  2. Create a new branch: git checkout -b feature-branch-name.
  3. Make your changes and commit them: git commit -m 'Add some feature'.
  4. Push to the branch: git push origin feature-branch-name.
  5. Submit a pull request.

πŸ™ Acknowledgements

This project was built using the following with the help of following people and technologies:

πŸ’Ό Careers

I am currently open to the following roles:

  • πŸ’» Looking for Internships in Web Development Roles (Frontend/Backend/Full-Stack).
  • πŸ‘¨β€πŸ’» Seeking Full-time Software Developer Engineer (SDE) Positions
  • πŸ“ Specialization: Web Development (Frontend, Backend, and Full-Stack)

If you are interested in working with me or have any opportunities, please reach out to me via LinkedIn, Email, or other socials mentioned below.

πŸ“ To-Do

  1. Giving warning to the user when deleting the post.
  2. Make the website responsive. βœ…
  3. Using Database to store user's data.
  4. Implementing User Authentication.
  5. Adding a Share feature, which will generate a concise/shortened link of the posts to share it easily.

πŸ—“οΈ What My Daily Life Looks Like?

As of now (latest version of this README file), I'm building Projects using Web Development technologies to strengthen my fundamentals, in both Frontend & Backend, thriving to become a skilled Full-Stack Web Developer.

This project/website is my 1st self-made Backend project (as the genuine 1st project was Quora clone, made with the help of my teacher).

I'm currently learning Full-Stack Web Development (90% already completed) while developing a Full-Stack "AirBnb Clone" project, with the help of Apna College Institute's Delta Course.

After this, I will be building atleast 3-5 major Projects using React.js framework with Redux.js library, then building at least 3 real-world Full-Stack (MERN) projects to hone my skills, and secure a Full-Stack Web Developer job.

πŸ“œ License

This project is licensed under the MIT License.

πŸ“ž Contact Developer & Owner

Vinay Tambey

For any queries or suggestions, feel free to reach out through above mentioned links.

πŸ“Š Project Status

This project is, currently, not in development by the Owner, but we're always looking to add new features and improvements!

πŸ’Ό Support

Give a ⭐️ if this project helped you!


Made with ❀️ by Vinay Tambey

About

πŸ“Έ A Social-Media Platform built with Node.js & Express.js | Features: photo uploads, captions, post editing & deletion | EJS templating & Vanilla CSS | RESTful APIs & CRUD operations | Perfect for Backend Dev Learning | Initially, No DB, uses Array for Data Storage, but More Features Coming πŸš€

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •