This is a clone of the Apex Legends official website built using Express.js as the backend framework, EJS for templating, and Bootstrap for responsive design. The project replicates the layout and functionality of the official site using a lightweight server, front-end technologies, and MongoDB as the database. Additionally, it includes a blog feature with create and delete functionalities.
- Responsive Design: Built with Bootstrap for a responsive, mobile-first design.
- Templating: Uses EJS for dynamic HTML templating.
- Server: Backend powered by Express.js for routing and serving pages.
- Database: MongoDB for storing blog data.
- Blog Features: Ability to create and delete blog posts.
- Custom Styling: Additional custom styling with CSS for improved visual elements.
-
Clone this repository:
https://github.com/kyzn-15/Apex-Legends.git cd Apex-Legends
-
Install dependencies:
npm install
-
Set up MongoDB:
- Make sure you have MongoDB installed and running.
- Create a
.env
file with your MongoDB connection string:MONGODB_URI=mongodb://localhost:27017/apex_legends_clone
-
Run the application:
node app.js
-
Visit the application in your browser at
http://127.0.0.1:3000/
.
- Homepage: Shows the main banner and featured content.
- About Page: Provides background information about the game.
- News Page: Displays the latest game-related news articles.
- Blog: View, create, and delete blog posts.
- Create Blog Post: Navigate to
/blog/create
to create a new blog post. - Delete Blog Post: Blog posts can be deleted by clicking the delete button on each post.
apex-legends-clone/
│
├── public/
│ ├── css/
│ └── assets/
│
├── views/
│ ├── layouts/
│ ├── partials/
│ └── pages/
│
├── models/
│ └── blog.js
│
├── routes/
│ └── blog.js
│
├── app.js
├── package.json
├── package-lock.json
├── .env
└── README.md
- public: Contains static files like CSS and images.
- views: EJS templates are organized here. Layouts, partials, and page-specific templates.
- models: MongoDB models, including the blog schema.
- routes: Express routes for handling blog logic and other pages.
- app.js: Main application file where routes and the Express server are set up.
- Express.js: Web framework for Node.js.
- EJS: Templating engine for dynamic HTML.
- MongoDB: NoSQL database for storing blog posts.
- Mongoose: ODM for MongoDB in Node.js.
- Bootstrap: Frontend framework for responsive, mobile-first websites.
- CSS: Custom styling to complement Bootstrap.
Feel free to fork this project and submit pull requests. Any contribution that improves the quality of the clone or adds new features is welcome.
This project is licensed under the MIT License. See the LICENSE
file for more details.