Welcome to MY Unsplash, a full-stack web application built using the MERN stack. The app allows users to add, view, search, and delete images, and was designed with scalability and efficiency in mind. In this repository, you'll find the source code for MY Unsplash, as well as instructions on how to set up and run the app on your local machine.
-
Frontend development: To build the frontend of MY Unsplash, I used React.js to create the components and structure the app. I also integrated Tailwind CSS to style the UI and ensure consistency across the app.
-
Backend development: For the backend development, I used Express and Node.js to create the API and implement the CRUD operations. I also used design patterns like MVC (Model-View-Controller) to ensure the API was scalable and maintainable. To enhance the backend development, I used third-party libraries like Mongoose to interact with MongoDB and handle data validation and sanitization.
-
MongoDB integration: To store and manage the app's data, I used MongoDB, a NoSQL database that is well-suited for scalable and dynamic web apps. I designed the database schema to store images, user data, and metadata, and ensured data consistency and integrity by implementing proper validation and error handling.
-
App features: The main features of MY Unsplash include adding and viewing images, searching for images based on keywords, and deleting images. To implement these features, I used a combination of React components and API calls to interact with the backend and retrieve and manipulate data. I also used third-party APIs like Unsplash to provide a seamless and user-friendly experience.
-
Development process: During the development process, I used tools like Git for version control and Jest for testing. I also followed best practices like writing clean and modular code, using descriptive variable names. I worked iteratively and made sure to test and debug my code regularly to ensure the app was functional and bug-free.
-
Reflection: Building MY Unsplash was a challenging yet rewarding experience. I learned a lot about the MERN stack and how to create scalable and efficient web apps. I also learned about the importance of testing, documentation, and good coding practices in maintaining code quality and readability
-
Adding and viewing images: Users can add images to the app and view them on a dedicated page. This feature allows users to upload and showcase their own images, as well as view images uploaded by others.
-
Searching for images: Users can search for images based on keywords using the app's search functionality. This feature enables users to quickly find images that match their interests or needs.
-
Deleting images: Users can delete images they have uploaded to the app. This feature provides users with control over their images and ensures that the app's database remains organized and clutter-free.
This application was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.
To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
# Clone this repository
$ git clone https://github.com/Kehindecodes/my-un-splash
# Install dependencies
$ npm install
# Run the app
$ npm start- GitHub kehindecodes
- Twitter @oki_kehinde