This repository serves as a central location for collaborative efforts to develop a visually appealing and functionally adept website compatible with the BlogSpot platform. Our team is committed to realizing the inherent elegance and refinement of BlogSpot within the digital sphere, prioritizing user-centric design principles and intuitive navigation for an optimal user experience.
This project originated as a platform to apply the coding and problem-solving skillsets acquired during Masai School's curriculum. It fostered collaboration in the development of a fully functional website. Conceived and completed within a five-day timeframe during Masai's Construct Week, the project served as a collaborative instrument facilitating exploration, knowledge acquisition, and professional growth.
This project prioritizes front-end development, incorporating dynamic functionalities achieved through a simulated API created using JSON-server. The primary development tools leveraged include HTML, CSS, JavaScript, and Bootstrap version 5.3 as a UI framework.
The front-end application and the simulated back-end server have been independently deployed to Netlify and Render, respectively. Access to the deployed versions is provided below.
Frontend:- https://celadon-maamoul-95cda6.netlify.app
Mock Server:- https://tech-tatva-2345-1.onrender.com
my-app/ ├─ Backend/ | ├─ Mock Server | ├─ Pages | ├─ index.html ├─ Frontend/ │ ├─ JS files | ├─ Pages | ├─ CSS | ├─ index.html
A comprehensive video presentation detailing the project and demonstrating its functionalities is available for viewing on the link below.
- A video walkthrough of the project's codebase and folder structure is available for viewing on YouTube.
Youtube:- https://youtu.be/nGyQvg-GjWo
- Dynamic Content with Simulated Backend: The project leverages a mock server to achieve dynamic elements, enhancing user experience without requiring a full-fledged backend at this stage.
- Dynamic UI Elements via Bootstrap 5.3: The project utilizes Bootstrap 5.3 as a UI framework to facilitate the creation and manipulation of dynamic user interface elements.
- Responsive Design for Optimal Viewing: The website prioritizes responsiveness, ensuring an optimal user experience across various devices, from desktops to mobile phones.
- Integrated Product Management Dashboard: An administrative dashboard is included for managing product information within the application.
Node.js and npm (or yarn) installed on your system. Steps:
- Clone or download the project repository.
- Navigate to the project's root directory using your terminal.
- Run the command npm install to install all the project dependencies, including Bootstrap 5.3.
- Start the Mock Backend Server (Optional):
A pre-configured mock backend server has been deployed for your convenience [https://tech-tatva-2345-1.onrender.com].
-
Alternatively, to run the mock server locally, navigate to the backend directory within the project and execute one of the following commands:
-
npx json-server db.json -m ./node_modules/json-server-auth/
-
npm run start (if a start script is defined in the package.json file)
-
Admin Dashboard Access: [https://mellow-vacherin-f43369.netlify.app]
-
Please note that the admin dashboard and its functionalities require authentication credentials. Currently, there is no guest access available for these features.
- The user journey commences on the landing page, which features a prominent navigation bar. This navigation bar incorporates the project logo alongside designated buttons for accessing various sections of the website. Additionally, login and signup functionalities are readily available for user account management.
- This is a dynamic user interface element that displays a user's published posts in a card format.
- Clicking on a card initiates an authentication flow, prompting users to sign in or create a Blogspot account for full post access.
- Following user credential entry and login button selection, a modal window displays a "logic successful" message, indicating a successful authentication process.
- A successful login grants users access to a designated content portal, offering the ability to explore and engage with a collection of articles and blog posts.
- Selecting a post will trigger a modal window to display, presenting the article's detailed information or description.
- The website incorporates a search function that allows users to locate articles by title. Upon entering a search term, only matching article cards will be displayed.
- Selecting the bookmark icon adds the chosen article to the user's favorites list, allowing for easy access from a dedicated "Favorites" page.
- The website provides a designated "Write" page, empowering users to create and submit articles that will subsequently be displayed on the homepage.
- The system presents an administrative login interface, requiring authorized personnel to enter their credentials for access to the admin dashboard.
- Following successful authentication with valid credentials, a confirmation pop-up will be displayed. Clicking on this pop-up will then redirect the authorized administrator to the dedicated admin dashboard.
- This initial view within the admin dashboard serves as a landing page, presenting a user ranking table. The table is designed to showcase users ranked by the number of blog posts or articles they have contributed, along with their corresponding user details.
- Selecting the "Post" button within the side menu redirects the administrator to a dedicated page showcasing details associated with user posts.
- Clicking the "Edit" button associated with each individual card triggers the population of the edit form with the corresponding article's data. This functionality allows administrators to modify the details of the selected article within the edit menu.
BlogSpot Login:-
ID - sagar@1234.com
Password - 123456
Admin Login:-
ID - shobhit@gmail.com
Password - 1122334455
- HTML
- CSS
- JavaScript
- Bootstrap Library (Bootstrap 5.3)