The Wewix app is a web-based application that allows users to easily create and customize their own professional-looking websites, similar to the popular website builder Wix. It is built using a combination of different frameworks, including Vue, Node, MongoDB, and Express. The wewix app offers a variety of customizable templates and design elements, as well as other features, to help users create unique and engaging websites. It is user-friendly and accessible to people of all skill levels, making it easy for anyone to create a professional-looking website without needing any coding experience.
🎉 The app is live on render, try it here.
🏁 Table of Contents
As alumni of Coding Academy, a coding bootcamp, we wanted to challenge ourselves and showcase our skills by tackling a difficult project. We were inspired by the success of previous Wix clone projects and saw areas where they could be improved. We decided to create our own version of a web app similar to Wix, a popular website builder, as our final project in the bootcamp (called Sprint 4), and called it "wewix". We wanted to create a better version that focused on great design, a great user experience, and a solid foundation that would allow us to add a lot of features while keeping the app stable.
In just 12 days, we worked tirelessly to code and design a user-friendly and feature-rich platform using Mongo, Node, Vue, and Express. Our goal was to make wewix as easy and intuitive to use as possible, so that anyone, regardless of their technical expertise, could create and customize their own professional-looking website.
Although wewix was created as a project for Coding Academy and not a real product, we are proud of what we have accomplished and hope that it can serve as an example of our capabilities as aspiring full stack developers.
Wewix is a powerful and user-friendly web app that allows anyone to easily create and customize their own professional-looking website. It offers a wide range of features that make it easy to design and manage your website, including customizable themes, advanced edit tools, inner drag and drop functionality, quick links, media query preview, custom url options, and the ability to work together with others on your website. Additionally, wewix provides live chat support, extra edit options, and a comprehensive dashboard to help you manage your website and track its performance.
Wewix offers a selection of customizable themes that allow you to quickly and easily change the look and feel of your website. You can choose from a range of pre-designed themes and override certain elements to create your own unique design. The themes are easy to use and offer a range of design options.
Wewix includes a history feature that allows you to undo and redo changes to your website. This can be useful for reverting to a previous version of your website or undoing any changes you no longer want.
Wewix's Edit Tools provide a range of options for customizing the content and layout of your website. This includes the ability to grab pre-made sections and add them to your website, as well as the ability to change the look of elements such as text, images, and buttons. You can adjust the font size, color, and other styles, as well as remove elements and sections that you no longer want. This makes it easy to create a unique and professional-looking website.
Wewix's inner drag and drop functionality allows you to easily rearrange elements within a page, so you can create the exact layout you want. This can be useful for organizing your content and creating a seamless user experience.
Wewix's Quick Links feature allows you to easily add and manage links on your website. When you click on a link in the navbar, the entire page layout will open to the side, allowing you to choose where to link that nav link to. Once you have published your website, clicking on that link will cause the app to scroll to the section you chose. This makes it easy to create functional navigation menus.
Wewix's Media Query Preview allows you to see how your website will look on different screen sizes and devices. This can be useful for ensuring that your website is fully responsive and looks great on any device. That being said, all websites created in Wewix are 100% responsive automatically, so you can be confident that your website will look great on any device.
Wewix allows you to customize the URL of your website, so you can create a short and memorable address that is easy for visitors to remember.
Wewix's Work Together feature allows you to collaborate with others on your website. This feature lets you send someone a link, which will allow them to join you in creating a website together. Both users will be able to see the website change in real time, including seeing each other's cursor movements.
Wewix's Live Chat feature allows you to communicate with visitors to your website in real time. This can be useful for providing support and answering questions, as well as for engaging with your audience and building relationships with potential customers. With the Live Chat feature, you can add a floating chat bubble to your website, which visitors can use to send messages to you. All messages can be managed and viewed in the Wewix Dashboard, so you can keep track of conversations and respond to inquiries quickly and easily.
Wewix's Extra Edit Options provide additional customization options for your website. This includes the ability to center maps and edit forms.
Wewix's Extra Edit Options include the ability to center a map by inputting an address. This can be useful for highlighting the location of your business or for providing detailed directions to your website's visitors.
Wewix's Extra Edit Options also include the ability to edit forms and add or remove form questions. This can be useful for gathering information from visitors to your website, such as contact information or feedback. The form questions will automatically sync to the Wewix Dashboard, where they can be viewed and managed. This can help you stay on top of any inquiries or leads that come through your website.
The Wewix Dashboard allows you to manage stats about visitors to your website, see your conversion rate (the number of subscribers based on the number of visitors), see live chat messages in real time, and see real-time leads from users filling out forms on your published website. This can be useful for tracking the performance of your website and staying on top of any inquiries or questions from visitors.
Here is a list of the original templates used to create the Wewix components:
It is important to note that the creators of these templates hold the copyrights to their designs and assets. We would like to express our appreciation for their work.
We are a group of former students from Coding Academy, a coding bootcamp. As part of our final project, we created Wewix, a web app that allows users to easily create and customize their own professional-looking websites. We have a strong foundation in full stack and frontend web development, and are eager to put our skills to use in new hire opportunities. Please contact us if you are interested in working with us.
Are you interested in exploring the Wewix project and experimenting with its code? Great! In this section, we will show you how to clone the project and get started.
First, make sure you have the necessary tools installed on your computer, such as a code editor, a terminal, and Git.
Then, follow these steps to clone the project and run it locally:
- Open your terminal and navigate to the directory where you want to clone the project.
- Clone the frontend repository:
git clone https://github.com/Diego-Mc/wewix.git
- Navigate to the project directory:
cd wewix
- Install the dependencies:
npm install
- Start the development server (should start on port 5173):
npm start
- Clone the backend repository:
git clone https://github.com/Diego-Mc/wewix-backend.git
- Navigate to the backend directory:
cd wewix-backend
- Install the dependencies:
npm install
- Start the development server (should start on port 3030):
npm start
You should now be able to access the Wewix app in your web browser at the local development URL (http://localhost:5173 for the frontend and http://localhost:3030 for the backend). You can experiment with the code and make changes as you like. Just be sure to commit your changes and push them to your own fork of the project if you want to save them.
Happy coding!
Wewix is an open source project that was created for educational purposes as part of a coding bootcamp. It is not a real product and is not intended for commercial use. The developers of Wewix do not own the rights to the assets and designs of the templates used in the app, and these were used for educational purposes only. By using Wewix, you agree to respect the intellectual property rights of the creators of these assets and designs. Please contact the original creators if you have any questions or concerns.