Transform your organization's online presence with this modern, bilingual web application. Built for professionals who need a sleek, maintainable website without the complexity of traditional website builders.
- Present your content in two languages: English and French
- Seamless language switching
- Optional Google Translate integration for automated translations
- Highlight your team members with professional profiles
- Customizable bios and roles
- Upload pictures of your members
- Easy-to-manage team section
- Craft your story through customizable "About" sections with drag-and-drop ordering
- Update content easily through an intuitive admin interface
- No coding required for content updates
- Built-in user management system
- Google OAuth integration (optional)
- Professional email integration
- Secure admin interface
- Responsive layout that works on all devices
- Professional appearance out of the box
- Customizable to match your brand
- Professional Service Firms
- Consulting Companies
- Small to Medium Businesses
- Non-Profit Organizations
- Any team wanting a professional web presence
View Screenshots Gallery showcasing the application's features and interface.
Note: This project uses Git LFS (Large File Storage) for screenshots. To view the screenshots locally, you'll need to:
- Install Git LFS:
git lfs install- Pull the LFS files:
git lfs pull
Click to expand technical information
This is a full-stack web application built with:
- React frontend
- Node.js backend
- SQLite database
- Docker containerization
- Nginx reverse proxy
- A web server (Reverse Proxy)
- Docker and Docker Compose V2
- Git
.
├── public/ # Static files served by Nginx
├── src/ # React frontend source code
├── server/ # Backend server
├── setup/ # Setup service for initial configuration
├── nginx.conf # Nginx configuration
├── docker-compose.yml
└── Dockerfile
- Clone the repository:
git clone <repository-url>
cd drenlia-web-
If you plan to use a custom domain, configure it now (ON YOUR HOST or Reverse Proxy, not in the project):
- Configure your domain's DNS to point to your server's IP address
- Set up a reverse proxy on your host system (e.g., Apache or Nginx) to forward requests to the Docker container:
# Example Nginx configuration server { listen 80; server_name your-domain.com; location / { client_max_body_size 50M; # Important to allow file uploads up to 50M proxy_pass http://localhost:3010; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }
- IMPORTANT Update the
setup/vite.config.tsfile to allow your domain:export default defineConfig({ server: { allowedHosts: [ 'localhost', '127.0.0.1', 'your-domain.com' ] } })
-
Start the application:
docker-compose up -dThe application will be available at:
- Frontend: http://localhost:3010 (or your custom domain http://your-domain.com)
- Setup Service: http://localhost:3010/setup (or your custom domain http://your-domain.com/setup)
Once the application is running and accessible in your browser, follow these steps to complete the initial setup:
-
Navigate to the setup page:
http://yourdomain.com/setup -
Complete the following setup sections:
- This section can be skipped as it contains default values that work well for most installations.
- Port 3011 should not be changed
- Set the Frontend URL (e.g.,
http://localhost:3010for local development) - Add your domain to Allowed Origins:
http://localhost:3010,http://yourdomain.com,https://yourdomain.com
-
Configure your SMTP settings:
- SMTP Host
- SMTP Port
- SMTP Username
- SMTP Password
- From Email Address
- Email To
-
Configure the Session Secret (a secure random string for session management)
- Enable Google login by setting:
- Google Client ID
- Google Client Secret
- Instructions for obtaining these credentials:
- Go to the Google Cloud Console
- Create a new project or select an existing one
- Enable the Google+ API
- Create OAuth 2.0 credentials
- Add your domain to the authorized domains
- Add your Google Cloud Translation API key to enable automatic translations
- If not configured, you'll need to manually input content in both languages
- Set up your administrator account:
- First Name
- Last Name
- Email Address
- Password (use a strong password)
- This account will have full access to the admin interface
- Configure basic site information:
- Version can be left as is
- Company Name
- Contact Email (displayed in the website footer)
- Review all settings
- Click "Save All Settings"
After completing the setup, you can access the admin interface at:
http://yourdomain.com/admin
Use the admin credentials you created during setup to log in.
IMPORTANT: YOU NEED TO disable the setup page. Click the button in the Dashboard to do so.
Once logged in, you'll have access to the following features:
The dashboard provides an overview of your content and quick access to all administrative functions. You'll see:
- Total number of About Sections
- Total Team Members
- Number of Users
- Quick access links to all major sections
- Quick Tips for managing your website
-
About Sections: Edit your About page content, including your story, mission, and values. You can add, edit, and reorder sections to create a compelling narrative about your organization.
-
Team Members: Manage your team profiles by adding or editing:
- Names and titles
- Professional bios
- Profile photos
- Contact information
- Display order on the team page
-
Users: Control user access to the admin interface:
- Create new user accounts
- Modify existing user permissions
- Manage admin access levels
- Maintain security through user management
After adding your team members, you can create non-administrative accounts allowing them to login and update their own profile and bio. A regular user can only edit the profile that is matching the email used to login.
Configure site-wide settings including:
- Visual assets (logo and background video used on the homepage)
- General website settings
- Site Content translations: all of the text found on all pages in English and French
A security warning will be displayed on the Dashboard if the Setup Service is still running. For security reasons, make sure to disable the setup service when not in use by clicking the "Disable Setup Service" button in the top-right corner of the Dashboard.
To secure your website with HTTPS, you can use Let's Encrypt to obtain a free SSL certificate. The process varies depending on your host's operating system and web server. Here's a basic example for Ubuntu with Nginx:
-
Install Certbot and the Nginx plugin:
sudo apt update sudo apt install certbot python3-certbot-nginx
-
Obtain and install the certificate:
sudo certbot --nginx -d yourdomain.com
Replace
yourdomain.comwith your actual domain name.
For other operating systems and web servers, refer to:
Click to expand services information
- React application
- Served by Nginx
- Handles user interface and client-side logic
- Node.js server
- Handles API requests
- Manages database operations
- Initial configuration interface
- Disabled after first-time setup
- Can be re-enabled by removing the
.setup-disabledfile
- Backend API for the setup service
- Handles configuration storage and validation
- The application uses SQLite as its database. The database file is located at
server/database.sqliteand is persisted through Docker volumes.
-
If the setup service is not accessible:
- Check if the
.setup-disabledfile exists - Remove it to re-enable the setup service
- Restart the containers
- Check if the
-
If you encounter port conflicts:
- Modify the port mappings in
docker-compose.yml - Update the corresponding configurations in
nginx.conf
- Modify the port mappings in
-
For database issues:
- Check the database file permissions
- Ensure the Docker volume is properly mounted
-
If configuration changes don't take effect:
- After modifying configuration files (like
vite.config.ts,package.json, etc.), you need to restart the container:docker restart drenlia-web-app-1
- If the changes still don't take effect, try rebuilding the container:
docker-compose down docker-compose up -d --build
- Make sure you're editing the correct configuration file (e.g.,
setup/vite.config.tsfor the setup service) - Verify that the domain name is exactly as it appears in the error message
- Check that there are no typos in the domain name
- Ensure the configuration file is saved properly
- After modifying configuration files (like
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Create a new Pull Request
This project is licensed under the GNU General Public License v3.0 (GPL-3.0) - see the LICENSE file for details.
This means you are free to:
- Use the software for any purpose
- Study how the software works
- Modify the software
- Distribute the software
- Share your modifications
Under the condition that you must:
- Include the original copyright notice
- Include the license text
- State significant changes made to the software
- Include the source code or provide a way to obtain it
- Use the same license for derivative works