Full Stack Remix Shop Source code free download gratis

07 Dec 2022

#source code #e-commerce #online shop #react #download #fullstack #website #gratis #template #free #free download #remix

Built modern online shop with react remix full stack online shop free download source code gratis

Hello and welcome again on our blog.. on this article we share full source code project for help you to build new website or learn about remix react framework , but not just remix only, we can learn about prisma and integration database too... so you can built a fullstack web application, let's get started Now

Jumpa lagi man teman wan kawan dan pada blog post artikel kali ini kita akan belajar gimana sih membuat web app fullstack yang keren dan beken era modern saat ini, bagaiaman konsep kerja nya ?? tentunya kita menggunakan satu framework doang dalam bekerja, dalam hal ini adalah frontend yang langsung dapat digunakan dalam mengurus pengelolahan data sampai fungsional login dan register nya,nah makin keren kan... tapi sebeleum melangkah lebih lanjut , yuk cek beberapa keperluan yang musti kamu unduh dibawah ini guna nya untuk menjalankan project kamu ini gaes...

Before we download and run source code project make sure you have install it third party apps, like node js and visual code studio, because we work using this app, so download first and install it on your device.
Node Download →
After download you need to install node, then you can test using terminal bash or click windows logo with keyboard then typing cmd, now you will see your command prompt , and you can run or copy this command node -v on your terminal bash and push enter, and if you see node version, congratulations you have successfully install it node on your computer.
Visual code studio download →
Okay.. now we need to work for editing code and other for customise your web app, so you can download and install visual code studio on your devices.

For demo mode visit on https://websitedeveloper.pages.dev/

Before we download source code project , let me explain about design UI for this project.

Design Implementation

Full Stack Remix Shop Source code free download gratis

Home page design with clean landing page for information about your shop , include with navigation menu , home page area, shop page, and login for login and register on your fullstack web app , then on footer is include with contact information for make easy web visitor to contact you. of course you can change all article content in here just visit on source code project then change what you needed.

Ini adalah tampilan halaman beranda yang super bersih gaes... entah kenapa sekarang kita lebih suka warna natural hitam dan putih doang makin minimalis gitu sih... dan yap konsep tema ini juga kita terapin ke proyek kali ini, dan tentunya mengusung halaman arahan supaya ngemudahin pelanggan dan pengunjung situs untuk menerima informasi apa saja sih.. dan kamu bisa ubah ini artikel nya semua kok jangan kawatir, jadi bisa kamu atur sesuaikan ama kebutuhan mu, wong ini juga kode sumber terbuka agar kita bisa belajar ye kan....

Full Stack Remix Shop Source code free download gratis

Shop page design - after home page then we can visit on shop page area, on this page will displaying all your product in here.. with image banner product, title and description product too.. and include with porduct shop detail page.

Dan setelah itu kita cuma buat tiga halaman fungsional ya termasuk halaman beranda , halaman daftar produk - produk detail dan login untuk akses ke webadmin nya, di halaman daftar produk ini akan menampilkan semua data yang sudah kita masukan sebelumnya , karna kita udah injeksi kan juga otomatis contoh produk , agar ngemudahin kamu mempelajari dan melakukan perubahan dengan cepat dan mudah nya.

Full Stack Remix Shop Source code free download gratis

Product page design - Now you can see information about product detail with click one product on your shop page, and you will redirect to product detail page, on this area we can insert a title, description, banner cover image, and video, include with your content article information about this product details information.

Lanjut dihalaman detail produk ini, setelah pengunjung webapp kamu akses pada salah satu produk maka akan ditampilin detail informasi mengenai produk mu, dan lebih keren lagi selain ada foto kita juga udah sediain video jadi kan makin lengkap ye kan... gas..... lanjut juga ada link yang nantinya bisa kamu arahin ke payment gateway maupun ke lain nya seperti link ke marketplace kamu dll. pokok nya gaassss.....

Full Stack Remix Shop Source code free download gratis

Login page design - okay now you can visit on login page for login and accsess on your backpanel admin to update , create new or delete products, you can login with default use email : [email protected] and password : 12345678 , or you can create new user just click on register then register on your web app, and login using your new account .

Dan setelah itu ada deh halaman untuk akses ke pengelolahan data disini, dengan mudah aja kamu bisa klik ke halaman navigasi login, atau kamu juga bisa melakukan pendaftaran user baru untuk ngebuat post produk yang baru yess... jadi langsung aja deh cobain kaka....

Full Stack Remix Shop Source code free download gratis

Backend page create new product - after login you can see all product list detail in here, you can create new with push or click new product button, or delete product . for create new you can see the scheme like title, description, cover image for product, and video for video product information, link is for integration with your paypall and other payment link ,or marketplace like aamazon, shopee,tokopedia and other you have.

Setelah masuk ke halaman webapp kamu akan di sambut dengan beberapa post produk yang uda kamu bikin tuh.. nah tinggal aja deh kamu bikin sesuai kebutuhan kamu , misalnya menghapus data produk, memasukan data baru dengan cara klik tambah produk baru dan masukan detail informasi mengenai produk mu disini mulai dari gambar, judul, deskripsi, video youtube embed, sampai link dan konten artikel kamu disini. lalu simpan untuk melakukan update dan penyimpanan data produk baru untuk shop kamu.

Donwload Source code remix shop starter
Github Download
Clone with terminal just run

git clone https://github.com/mesinkasir/remix-shop.git

Contibution with donation for support our team dev make other source code for the world.

Buy me a coffee ☕️ ❤️ ✌🏻
Donate Now or Hire Us

Installation Remix full stack

For first make sure you have download or clone this repo source code project, then you can create new project on desktop and name it with remix-shop - and extract all source code file in here, now we can install use terminal bash, and make sure you have install node before run source code installation , now we need to accsess source code project - remix-shop folder on desktop using terminal , so open terminal or push windows logo on your keyboard then typing cmd and enter,
now you can run this command cd C:\Users\pcname\Desktop\remix-shop
need to change pcname with your device pc name , and now we can run installation with run this command
npm install
After that we can visit on source code project , you can copy or rename .env.example file to be .env
Now we need to create your web app on fullstack mode, so we can integration with database, for example we can use sqlite, mongodb, firebase realtime database, mysql,potgresql, and others. for do that we use prisma for create connection with database, no need wory because on this pakcage is include with it, so we just need to create database scheme - seed data and migration on your database.
Okay back again on your terminal, make sure you have use remix-shop project folder for run instalaltion, and we can run
npx prisma db push && npx prisma db seed && npx prisma migrate dev
and now we allready integration with your database , then we can run this project on your local server, for do this we can run npm run dev
and open web browser and visitlocalhost:3000
And congratulations... you have create a new fullstack web app using remix react framework !!

For demo mode visit on https://websitedeveloper.pages.dev/

Installasi awal pastiin kamu sduah sudah mengunduh ya kode sumber terbuka ini, lalu kalau uda ikutin cara diatas deh.. yang pastinya kamu musti buat folder baru di dekstop untuk kemudahan pastiin kamu sudah kasih nama dia dengan remix-shop ,lalu kalau uda kita perlu pindahin aja semua folder dari kode sumber terbuka ini ke remix-shop folder, kita butuh akses dengan terminal cara nya teken aja logo windows dan masukan cmd terus kamu dan jalannin cd C:\Users\namapcku\Desktop\remix-shop ganti namapcku dengan nama pc mu yes..
kalau uda langkah selanjutnya kembali ke kode proyek mu, dan kita perlu mengganti nama dari .env.example menjadi .env, cara nya klik kanan aja dan rename , udah.... kalau udah maka kita bisa lakukan installasi langsung nih...
jalanin aja npm install dan tunggu sampai installasi selesai , lanjut kita butuh untuk melakukan koneksi dengan database , dan kita perlu langsung aja deh ngebuat db nya dengan cara jalanin perintah ini
npx prisma db push && npx prisma db seed && npx prisma migrate dev
fungsi ini guna memasukan database ke project fullstack kamu ini kaka...
selesai sudah proses installasi dan migrasi database nya, sekarang kita bisa ngejalanin nya di dengan cara npm run dev lalu buka deh localhost:3000
dan selamat kamu sudah bisa ngejalanin dan installasi fullstack online shop kamu ini gaes.... tinggal buka pakai visual studio kode untuk melakukan editing nya ya... lanjut dan gass mas e.... jalanin code . dan hapy koding mengkoding sampai jari jemarimu melengking...

Full Stack Remix Shop Source code free download gratis

Deploy fullstack online shop

What next ?? if you need you can deploy and make your site online with using fly.io ,no need wory because we have insert a flyctl.zip file on this source code, so you can extarct flyctl_0.0.398_Windows_x86_64.zip file, for first we need to run flyt using terminal, so for do that back agin or open your terminal visit on source code folder then run flyctl.exe
Now we can register and create new account on fly so run this flyctl auth signup and resgiter for your id, then we run this source code file with run flyctl launch --your-webapp-name-project --region sin. or if you need to configure your server location to deploy your webapp so you can run this command flyctl launch then you can name it your webapp, and select server region with you needed. and dploy it !! congratulations your fullstack online shop webapp is live now !!

Deploy on other host, of course you can deploy your project on other host like netlify, cloudflare, vercel , you can read this documentation how to run and deploy your fullstack web app on other host →.

BONUS CONTENT !!
Astronot Remix Source Code terbaru →
Mesin kasir terbaru →
All source code project free download gratis →
Oke we hope this project help you for build modern website and blog using bludit flat file cms and happy codding !!

« Previous