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.
- 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.
- Node.js: Gained an understanding of how to use Node.js to build server-side applications.
- Express.js: Learned how to use Express.js to create a web server and handle routing.
- EJS: Learned how to use EJS as a templating engine to generate dynamic HTML content.
- REST Principles: Acquired knowledge of REST principles for creating RESTful APIs.
- CRUD Operations: Understood the concepts of Create, Read, Update, and Delete (CRUD) operations.
- CRUD on Resources: Learned to perform CRUD operations on resources (data stored in the database) using HTTP verbs and RESTful APIs.
- Redirection: Learned to redirect client requests using
res.redirect()
in route handlers. - Method Override: Learned to override HTTP GET and POST methods with PUT, PATCH, and DELETE methods using the
method-override
library. - 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.
- 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. - Dotenv: Learned how to use the
dotenv
library to manage environment variables, allowing for better configuration and security of sensitive information. - 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'sfs.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. - 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.
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.
-
Clone the repository:
git clone https://github.com/VinayNoogler000/Instagram-Clone.git
-
Navigate to project directory:
cd Instagram-Clone
-
Install dependencies:
npm install
-
Start the server:
npm start # only if 'nodemon' library is installed in your system, else node index.js
-
Open your browser and navigate to
http://localhost:8080/posts
.
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
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.
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.
To contribute to this project, follow these steps:
- Fork the repository.
- Create a new branch:
git checkout -b feature-branch-name
. - Make your changes and commit them:
git commit -m 'Add some feature'
. - Push to the branch:
git push origin feature-branch-name
. - Submit a pull request.
This project was built using the following with the help of following people and technologies:
- Apna College Institute for building such an amazing full-stack web development course.
- Aman Dhatterwal Bhaiya for Creating an Institute like Apna College.
- Shradha Khapra Ma'm for Teaching and Instructing Programming Fundamentals, Logic Building, Problem-Solving, Critical Thinking, and Web Development/Software Engineering in such an Interesting way.
- Node.js
- Express.js
- EJS
- UUID
- Multer
- Method-Override
- HTML5
- CSS
- JavaScript
- Dotenv for managing environment variables.
- Bunny.net
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.
- Giving warning to the user when deleting the post.
- Make the website responsive. β
- Using Database to store user's data.
- Implementing User Authentication.
- Adding a Share feature, which will generate a concise/shortened link of the posts to share it easily.
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.
This project is licensed under the MIT License.
Vinay Tambey
- LinkedIn: Vinay Tambey
- Email: Send Email to Vinay
- Twitter/X: @VinayNoogler000
- GitHub: @VinayNoogler000
For any queries or suggestions, feel free to reach out through above mentioned links.
This project is, currently, not in development by the Owner, but we're always looking to add new features and improvements!
Give a βοΈ if this project helped you!
Made with β€οΈ by Vinay Tambey