Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alrammahi-mariia/portfolio-drupal-react
This is a fully decoupled personal portfolio website built with React 18 and React Bootstrap for the front end, while the content is managed and hosted on Drupal.
https://github.com/alrammahi-mariia/portfolio-drupal-react
bootstrap5 drupal jsonapi reactjs
Last synced: 1 day ago
JSON representation
This is a fully decoupled personal portfolio website built with React 18 and React Bootstrap for the front end, while the content is managed and hosted on Drupal.
- Host: GitHub
- URL: https://github.com/alrammahi-mariia/portfolio-drupal-react
- Owner: alrammahi-mariia
- Created: 2024-10-09T14:03:57.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T09:41:27.000Z (4 months ago)
- Last Synced: 2024-12-09T22:22:13.328Z (about 2 months ago)
- Topics: bootstrap5, drupal, jsonapi, reactjs
- Language: JavaScript
- Homepage:
- Size: 1.16 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Personal Portfolio Website (React + Drupal)
This is a fully decoupled personal portfolio website built with **React 18** and **React Bootstrap** for the front end, while the content is managed and hosted on **Drupal**. The site fetches data from Drupal using its **JSON:API** web service to dynamically display content. This project was developed as a final assignment for the **Drupal course** at **Business College Helsinki**, under the guidance of **[Santosh Kalwar](https://github.com/kalwar)**.
## Table of Contents
1. [Features](#features)
2. [Technologies Used](#technologies-used)
3. [Screenshots](#screenshots)
4. [Demo](#demo)
5. [Project Structure](#project-structure)
6. [Getting Started](#getting-started)
7. [Usage](#usage)
8. [License](#license)
## Features
- **Fully Decoupled Architecture**: The front end and back end are completely separate, allowing for independent development.
- **Dynamic Content**: Fetches data from the Drupal backend using the JSON:API module, ensuring that content updates are reflected on the site without redeployment.
- **Responsive Design**: Built with Bootstrap 5 to ensure the website is mobile-friendly and adapts to different screen sizes.
- **Modern Front-end Stack**: Utilizes React 18's latest features for an efficient, component-based architecture.
## Technologies Used
- **Frontend**: React 18, React Bootstrap, vanilla Bootstrap 5
- **Backend**: Drupal 11 with JSON:API module enabled
- **Hosting**: To host the site locally, follow the [installation](#installation) instructions provided below.
## Screenshots
## Demo
View demo walkthrough **[here](https://businesscollege-my.sharepoint.com/:v:/g/personal/s2200113_edu_bc_fi/EXd_xnhXGxlIuNq4XOXSZ6EB4ckarUIgwZYfI52qmrXHNA?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJTdHJlYW1XZWJBcHAiLCJyZWZlcnJhbFZpZXciOiJTaGFyZURpYWxvZy1MaW5rIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXcifX0%3D&e=kG6ccc)**
## Getting Started
### Prerequisites
Ensure you have the following installed on your system:
- **Node.js** (version 16 or later)
- **npm**
- **Drupal 10 or 11** with the JSON:API module enabled
### Installation
1. **Clone the repository**:
```
git clone https://github.com/alrammahi-mariia/portfolio-drupal-react.git
cd portfolio-drupal-react
```
2. **Install dependencies**:
```
npm install
```
3. **Set up the Drupal backend**:
Make sure you have a running Drupal 10 or 11 site with the JSON:API module enabled and properly configured. You may need to adjust CORS settings and configure permissions for anonymous users to access and edit content.
4. **Configure the API URL**:
Update the API base URL in the fetch requests to match your Drupal backend's JSON:API endpoint.
5. **Run the development server**:
```
npm run dev
```
The portfolio website should now be running at `http://localhost:5173`.
## Usage
- The front end fetches content from the Drupal backend. You can manage and update the portfolio's content directly from Drupal's admin interface.
- To add new projects or skills, add a new respective content type in Drupal, and the changes will be reflected on the website.
- The contact form allows users to send messages, which are submitted via a POST request and saved in Drupal as a new content item of the "Message" content type.
## License
This project is licensed under the MIT License.